配置项代码提示

新建vite.config.js 文件作为 viet 的配置项

1
2
3
4
5
export default {
    optimizeDeps:{
        exclude: [], // 指定数组中的依赖不进行依赖预构建
    }
}

直接 export default 导出我们的配置就可以了。但是这样写配置没有代码提示，对我们写代码不太方便。

下面介绍两种方法使配置文件有代码提示。

  1. 导入 defineConfig ，这个函数出入一个UserConfigExport对象，返回也是这个对象。编辑器就会按这个对象的属性给我们代码提示
1
2
3
4
5
6
import { defineConfig } from 'vite'
export default defineConfig({
    optimizeDeps:{
        exclude: [], // 指定数组中的依赖不进行依赖预构建
    }
})
  1. 加入注释，本质是和第一种方法一样，都是让编译器知道正在编辑的是哪个对象，给出相应的提示
1
2
3
4
5
6
7
8
/**
 * @type { import('vite').UserConfig }
 */
export default {
    optimizeDeps:{
        exclude: [], // 指定数组中的依赖不进行依赖预构建
    }
}

环境参数配置

在开发项目时，不同环境的配置肯定是不同的，所以要区分配置文件的环境，我们以生产环境和开发环境为例

不同环境分别创建一个单独的配置文件

vite.prod.config.js 文件 负责开发环境配置

1
2
3
4
/**
 * @type { import('vite').UserConfigExport }
 */
export default ({ })

vite.dev.config.js 文件 负责生产环境配置

1
2
3
4
/**
 * @type { import('vite').UserConfigExport }
 */
export default ({ })

vite.base.config.js 这里是共有的配置

1
2
3
4
5
6
7
8
/**
 * @type { import('vite').UserConfigExport }
 */
export default ({
    optimizeDeps:{
        exclude: [], // 指定数组中的依赖不进行依赖预构建
    }
})

在vite.config.js中引入它们，并输出配置

1
2
3
4
5
6
7
8
9
10
11
12
13
import { defineConfig } from 'vite'
import viteBaseConfig from './vite.base.config'
import viteDevConfig from './vite.dev.config'
import viteProdConfig from './vite.prod.config'
export default defineConfig(({command}) => {
    if(command === 'build'){
        console.log('生产环境')
        return {...viteBaseConfig, ...viteProdConfig}
    }else {
        console.log('开发环境')
        return {...viteBaseConfig, ...viteDevConfig}
    }
})

策略模式

我们在项目中尽量避免过多的 if, else。所以将上面的代码稍作修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { defineConfig } from 'vite'
import viteBaseConfig from './vite.base.config'
import viteDevConfig from './vite.dev.config'
import viteProdConfig from './vite.prod.config'

const evnResolver = {
    'build': () => {
        console.log('生产环境')
        return {...viteBaseConfig, ...viteProdConfig}
    },
    'serve': () => {
        console.log('开发环境')
        return Object.assign({},viteBaseConfig, viteDevConfig) //另一种写法
    }
}
export default defineConfig(({command}) => {
    return evnResolver[command]()
})

环境变量

环境变量通常配置在.env文件中

  • .env：所有环境都需要用到的环境变量

  • .env.development：开发环境需要用到的环境变量（默认情况下vite将我们的开发环境取名为development)

  • .env.production：生产环境需要用到的环境变量（默认情况下vite将我们的生产环境取名为production)

处理环境变量

vite 内置了 dotenv 这个第三方库处理环境变量。当运行npm run dev, npm run build 等命令的时候，dotenv 会在项目中找 .env 文件，解析文件中的环境变量，并将其注入到 process 对象下。

新建 .env 文件并设置变量 BASE_RUL

1
VITE_DOMAIN = 'https://www.yourdomain.com/'

自定义的环境变量都要以VITE_开头，不然客户端页面获取不到，因为vite做了一层拦截。这是为了防止将隐私性的变量直接送进 import.meta.env（这个对象后面再讲）中，

服务端

大家知道 vite.config.js 在 node 端运行。所以在启动项目的时候，如运行 npm run dev 时，在 vite.config.js 中可以读取 process 对象，process 是 node 端的一个特殊进程。此时打印下这个对象，其实现在还没有注入我们定义的变量。我们还需要设置下 env 文件让 dotenv 知道哪个文件。

1
2
3
4
5
6
7
8
9
10
11
12
// vite.config.js
import { defineConfig, loadEnv } from 'vite'
....

export default defineConfig(({command, mode}) => {
  	
  	// 配置
  	const env = loadEnv(mode, process.cwd(), '')
    console.log('process', env.VITE_DOMAIN)  // https://www.yourdomain.com
  
    return evnResolver[command]()
})

说下 loadEnv() 传入的参数

  1. mode : 模式。默认development 我们在执行构建命令的时候自动是加了 –mode development 。如：npm run dev --mode development, 只是development是默认模式我们可以省略。同理打包的时候默认是--mode production。我们可以添加其他模式如：–mode develop ，此时 mode 的值就是 develop
  2. 第二个参数传入 .env 文件所在的目录。process.cwd() 是工作目录，也就执行构建命令的目录，此项目的 .env 文件就是在根目录中，所以传入process.cwd()， 也可以直接传入路径如：/Users/dong/Project/test-vite 。
  3. 第三个参数定义文件名，默认 .env 可以不填。

执行构建命令的时候会调用loadEnv()函数，接下来我们将下这个函数都做了写什么。

  1. 直接找到 .env 文件并解析其中的环境变量，并放进一个对象里。
  2. 根据 mode 的值找到相应的 .env 文件，比如 mode 为 development 的时候，就会找 .env.development 文件，然后解析文件中的环境变量，放入一个对象中。会覆盖掉 .env 文件中相同的变量。

我们来验证下，在.env.development中声明环境变量VITE_DOMAIN = 'http://192.168.0.1/' 。运行命令

​ npm run dev会发现打印出来DOMAIN的值变成了 http://192.168.0.1/

客户端

process 只存在于node端，客户端是没有的。在前端 vite 会将对应的环境变量注入 import.meta.env 中。我们在前端打印下它

1
2
// main.js
console.log(import.meta.env)

得到一个对象

1
2
3
4
5
6
MODEBASE_URL: "/"
DEV: true
MODE: "development"
PROD: false
SSR: false
VITE_DOMAIN: "http://192.168.0.1/"

更改前缀

前面说了自定义的环境变量都要以 VITE_开头，我们也可以在配置中更改

1
2
3
4
export default {
   	...
    envPrefix: 'ENV_', // 配置环境变量前缀,默认 'VITE_'
}