Vue开发指南

Appearance

Vite ​

Vite 是一个快速、现代化的前端构建工具，旨在提供开发者友好的开发体验和优化的性能。

一、安装 ​

bash
npm install vite

# 创建 Vite 项目，并安装项目所需的依赖项
npm create vite@latest

二、配置 ​

当以命令行方式运行 vite 时，Vite 会自动解析 项目根目录 下名为 vite.config.js 的文件。

1、依赖预构建 ​

当你首次启动 vite 时，Vite 在本地加载你的站点之前预构建了项目依赖。默认情况下，它是自动且透明地完成的。

javascript
import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    include: ['linked-dep']
  }
})

2、智能提示 ​

方式一 ​

javascript
/** @type {import('vite').UserConfig} */
export default {
  // ...
}

方式二 ​

javascript
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

3、环境变量与模式 ​

.env ​

.env 文件是一个常见的配置文件，用于存储应用程序的环境变量。它的名称是以 ".env" 开头的，通常位于应用程序的根目录下。采用简单的键值对的格式，每行表示一个环境变量。Vite 使用 .env 从 环境目录 中的下列文件加载额外的环境变量：

  • .env：所有情况下都会加载
  • .env.local：所有情况下都会加载，但会被 git 忽略
  • .env.[mode]：只在指定模式下加载
  • .env.[mode].local：只在指定模式下加载，但会被 git 忽略
makefile
#.env：所有环境变量配置文件，且以 VITE_ 为前缀的变量会被暴露为 import.meta.env.VITE_API_KEY 提供给客户端源码
DB_HOST=localhost
DB_PORT=5432
VITE_API_KEY=abc123

#.env.development：开发环境变量配置文件默认名称，且以 DEV_ 为前缀的变量会被暴露为 import.meta.env.DEV_API_KEY 提供给客户端源码
DB_HOST=localhost
DB_PORT=5432
DEV_API_KEY=abc456

#.env.production：生产环境变量配置文件默认名称，且以 PROD_ 为前缀的变量会被暴露为 import.meta.env.PROD_API_KEY 提供给客户端源码
DB_HOST=localhost
DB_PORT=5432
PROD_API_KEY=abc789

TIP

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。如果想自定义 env 变量的前缀，需要配置 envPrefix 选项。

javascript
axios.post(url, {
  params: {
    API_KEY: import.meta.env.VITE_API_KEY // 或 DEV_API_KEY、PROD_API_KEY
  }
})

vite.base.config.js

javascript
import { defineConfig } from 'vite'

export default defineConfig({
  envPrefix: 'VITE_';
})

vite.prod.config.js

javascript
import { defineConfig } from 'vite'

export default defineConfig({
  envPrefix: 'PROD_';
})

vite.dev.config.js 文件

javascript
import { defineConfig } from 'vite'

export default defineConfig({
  envPrefix: 'DEV_';
})

vite.config.js

javascript
import { defineConfig, loadEnv } from 'vite'
import viteBaseConfig from './vite.base.config';
import viteProdConfig from './vite.prod.config';
import viteDevConfig from './vite.dev.config';

const envResolver = {
  "build": () => {
    console.log('生产环境');
    return ({...viteBaseConfig, ...viteProdConfig})
  },
  "dev": () => {
    console.log('开发环境');
    reutrn ({...viteBaseConfig, ...viteDevconfig})
  }
}

export default defineConfig(({ command, mode }) => {  //command：npm run dev/build ，mode：--mode development/production
  console.log('command', command);

  const env = loadEnv(mode, process.cwd(), ''); //process.cwd():返回当前node进程的工作目录
  console.log('ENV:', env);

  reutrn envResolver[command]();
})

HTML 环境变量替换 ​

Vite 还支持在 HTML 文件中替换环境变量。import.meta.env 中的任何属性都可以通过特殊的 %ENV_NAME% 语法在 HTML 文件中使用：

html
<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_API_URL%</p>

TIP

如果环境变量在 import.meta.env 中不存在，比如不存在的 %NON_EXISTENT%，则会将被忽略而不被替换，这与 JS 中的 import.meta.env.NON_EXISTENT 不同，JS 中会被替换为 undefined。

模式 ​

默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。

这意味着当执行 npm run build 时，它会自动加载 .env.production 中可能存在的环境变量；当执行 npm run dev 时，它会自动加载 .env.development 中可能存在的环境变量。

在某些情况下，若想在 npm run build 时运行不同的模式来渲染不同的环境变量，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式，且还需要新建一个 .env.mode-name 文件。

bash
# 运行开发环境服务器
npm run dev # 默认对应 .env.development 文件
npm run dev --mode development # 对应 .env.development 文件
npm run dev --mode dev # 对应 .env.dev 文件

# 运行生产环境服务器
npm run build # 默认对应 .env.production 文件
npm run build --mode production # 对应 .env.production 文件
npm run build --mode prod #对应 .env.prod 文件

4、CSS ​

CSS Modules ​

任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。导入这样的文件会返回一个相应的模块对象。

javascript
import { defineConfig } from 'vite'

export default defineConfig({
  css:{
    module:{
      scopeBehaviour?: 'global' | 'local'
      globalModulePaths?: RegExp[]
      generateScopedName?: string | ((name, filename, css) => string)
      hashPrefix?: string
      localsConvention?: 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'  //默认：null
    }
  }
})

CSS 预处理器 ​

由于 Vite 的目标仅为现代浏览器，因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如 postcss-nesting）来编写简单的、符合未来标准的 CSS。Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖。

bash
# .scss and .sass
npm add -D sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus
javascript
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      },
      less: {
        math: 'parens-division'
      },
      styl: {
        define: {
          $specialColor: new stylus.nodes.RGBA(51, 197, 255, 1)
        }
      }
    },
    devSourcemap: true //在开发过程中是否启用 sourcemap，开启后会显示源文件索引
  }
})

PostCSS ​

javascript
import { defineConfig } from 'vite'
import tailwindcss from 'tailwindcss'

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwindcss]
    }
  }
})

5、静态资源 ​

javascript
import { defineConfig } from 'vite';
import path form 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

6、打包生产 ​

javascript
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        assetFileNames: '[hash].[name].[ext]'
      }
    },
    assetsInlineLimit: 409600, //4000kb
    outDir: 'dist',
    assetsDir: 'static'
  }
})

7、插件 ​

vite-html-plugin

安装插件

bash
npm i vite-html-plugin

使用插件

javascript
import { defineConfig } from 'vite';
import htmlPlugin form 'vite-html-plugin';

export default defineConfig({
  plugins: [
    htmlPlugin({  //用法参见github
      inject: {
        data: {
          title: '主页'
        }
      }
    })
  ]
})

vite-plugin-mock

安装插件

bash
npm i vite-plugin-mock

使用插件

javascript
import { defineConfig } from 'vite';
import mockPlugin form 'vite-plugin-mock';

export default defineConfig({
  plugins: [
    mockPlugin()
  ]
})

8、TypeScript 的智能提示 ​

vite-plugin-checker 提供 TypeScript、ESLint、vue-tsc 等检查。

安装插件

bash
npm i vite-plugin-checker -D

使用插件

javascript
import { defineConfig } from 'vite';
import checker form 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    checker:{
      typescript:true
    }
  ]
})

TIP

  • vite-plugin-checker 插件需要安装 TypeScrit，且创建 tsconfig.json 配置文件
json
{
  "compilerOption": {
    "skipLibCheck": true,
    "isolatedModules": true
  }
}
  • 在构建生产版本时，你可以在 Vite 的构建命令之外运行 tsc --noEmit 进行类型检查，若报错则不进行构建

env.d.ts 或 vite-env.d.ts 默认情况下，Vite 在 vite/client.d.ts 中为 import.meta.env 提供了类型定义。随着在 .env文件中自定义了越来越多的环境变量，你可能想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示。

要想做到这一点，你可以在 src 目录下创建一个 env.d.ts 文件，接着按下面这样增加 ImportMetaEnv 的定义：

ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_KEY: string
}

如果代码依赖于浏览器环境的类型，比如 DOM 和 ES2017，你可以在 tsconfig.json 中修改 lib 字段来获取类型支持。

json
{
  "compilerOption": {
    "module": "ESNext", //为了支持import.meta.env
    "lib": ["ES2017", "DOM"]
  }
}

9、跨域 ​

javascript
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

读书、摄影、画画、弹琴、编程

Copyright © 2023 退居二线的程序猿