Vue3+TS：区分不同环境、使用publicPath

区分不同环境

在开发中，有时候我们需要根据不同的环境设置不同的环境变量，常见的有三种环境：

开发环境：development；
生产环境：production；
测试环境：test；

如何区分环境变量呢？常见有三种方式：

方式一：手动修改不同的变量（不推荐）。

方式二：根据process.env.NODE_ENV的值进行区分，这个process属性是definePlugin插件给我们注册的。这种方式也是使用很多的一种方式（推荐）。

js 复制代码

// 根据process.env.NODE_ENV区分
// 开发环境: development
// 生成环境: production
// 测试环境: test

let BASE_URL = ''
const TIME_OUT = 10000

if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://123.207.32.32:8000/'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://coderwhy.org/prod'
} else {
  BASE_URL = 'http://coderwhy.org/test'
}

export { BASE_URL, TIME_OUT }

方式三：编写不同的环境变量配置文件，vue cli支持这种方式，我们创建.env.development、.env.production、.env.test文件

通过环境变量配置文件，默认情况下，我们只能给BASE_URL、NODE_DEV设置值，这些值会自动被注入，如果是我们自定义的名字，可以VUE_APP_XXX这种格式开头，也可以被注入。

.env.development文件：

js 复制代码

VUE_APP_BASE_URL=https://coderwhy.org/dev
VUE_APP_BASE_NAME=coderwhy

.env.production文件：

js 复制代码

VUE_APP_BASE_URL=https://coderwhy.org/prod
VUE_APP_BASE_NAME=kobe

.env.test文件：

js 复制代码

VUE_APP_BASE_URL=https://coderwhy.org/test
VUE_APP_BASE_NAME=james

在JS中，我们直接使用不会报错，在TS中直接使用会报错：

js 复制代码

// 打印会报错
console.log(process.env.VUE_APP_BASE_URL)

我们在shims-vue.d.ts文件中声明一下即可：

js 复制代码

declare const VUE_APP_BASE_URL: string

使用publicPath

npm run build打包项目，打开打包后的build文件夹下的index.html文件，通过live serve打开index.html文件，这时候很多文件是加载不到的：

加载不到的原因是因为上面的路径是根据域名拼接的绝对路径，我们可以进入index.html中，将加载文件的路径改成相对路径：src="./js/chunk-xxxxxx.js"，也就是加载当前路径下的js文件夹下的文件，一个一个改路径，比较麻烦。

打包之后，如果不想手动一个一个改路径，可以进入vue.config.js文件中，添加publicPath: './'，这个值其实就是修改加载资源的路径，但是部署到服务器的时候肯定不需要这个值了，注释掉即可，或者加个环境判断也可以。