07vue3实战-----辨析开发环境和生产环境

很多公司的开发环境的服务器地址和生产环境的服务器地址不一样。

1.Vite的环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量。之前webpack是使用process对象来暴露的,process是基于node的。

• import.meta.env.MODE: {string} 应用运行的模式。
• import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
• import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
• import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

2.修改axios的封装

在上一章节中https://blog.youkuaiyun.com/fageaaa/article/details/145480312有一小部分我讲了axios的再封装,为了更好区分当前环境，所以需要对部分代码进行优化。

//service/config/index.ts：
let BASE_URL = ''
if (import.meta.env.PROD) {
  // 生产环境
  BASE_URL = 'http://xxx.prod:4000'
} else {
  // 开发环境
  BASE_URL = 'http://xxx.dev:4000'
}
const TIME_OUT = 10000;
export {
    BASE_URL,
    TIME_OUT 
}

3.测试

通过npm run dev在开发环境下运行；npm run build打包项目，然后通过npm run preview可以预览打包后的项目。

4.Vite使用dotenv加载额外的环境变量

除了上述的import.meta.env可以加载环境变量,我们还可以从环境目录中的下列文件加载额外的环境变量。

例如,我在项目根目录下建三个文件，.env、.env.development和.env.production三个配置文件。注意模式的单词不要写错了。

分别在三个文件中配置一些东西。
.env：

 VITE_NAME=why

.env.development：

 VITE_URL=dev

.env.production：

 VITE_URL=prod

然后在axios的封装模块serive中可以进行测试:

//service/config/index.ts：
let BASE_URL = ''
if (import.meta.env.VITE_URL == 'prod') {
  // 生产环境
  BASE_URL = 'http://xxx.prod:4000'
} else {
  // 开发环境
  BASE_URL = 'http://xxx.dev:4000'
}
const TIME_OUT = 10000;
export {
    BASE_URL,
    TIME_OUT 
}

注意:

• 只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。
• .env文件里面的配置不管啥时候都会加载；.env.development文件的配置只有在项目是开发模式才会加载；.env.production文件的配置只有在项目是生产模式才会加载；
• 如果项目配置很多，用dotenv这种方法更好；如果配置比较少，用import.meta.env和dotenv两种方式都可以。