[JavaScript知识库]vite项目、vue-cli项目环境配置

vite项目、vue-cli项目环境配置

环境分为以下几种

• 本地环境
• 测试环境
• 线上环境
• 其他环境

环境常量

我们在不同环境需要使用不同的配置，例如：线上环境上传文件地址 和测试环境的上传文件地址是不一样的，我们在打包的时候不想手动修改这些地址，使用不同的打包命令就可以生成不同环境的包，这个时候就需要使用到环境变量。

环境常量文件

通常是.env开头的文件，默认可被vite和vue-cli读取的文件有如下两个：

• .env.development
• .env.production

在这里面定义的常量都是可以被读取的：vite和vue-cli有一点区别。

1. vite读取的常量必须VITE_APP开头的
   

2. vue-cli读取的常量必须VUE_APP开头的
   

使用环境变量

vite中，分两种使用情况

1. 在vite.config.js中,需要使用vite中的loadEnv 方法
   loadEnv(mode, process.cwd()).你定义的常量名称

import { loadEnv } from "vite";
 export default ({ mode }) =>
  defineConfig({
    base: loadEnv(mode, process.cwd()).VITE_APP_BUILD_PATH,
    build: {
      outDir: loadEnv(mode, process.cwd()).VITE_APP_BUILD_NAME,
      assetsDir: "static",
      minify: "terser",
      terserOptions: {
        compress: {
          //生产环境时移除console
          drop_console: true,
          drop_debugger: true,
        },
      },
    }  });

2. 在项目中

const url = import.meta.env.VITE_APP_BASE_API;

vue-cli中

1. 使用process.env.你的环境常量名，在项目中和配置文件的写法相同

axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 1200000,
});

环境常量工作

请查看以下package.json文件中scripts片段

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build test": "vue-cli-service build --mode test",
  },

• npm run serve 读取的默认是.env.development文件中的常量
• npm run build 读取的默认是.env.production
• 同理npm run build test读取的默认是.env.test

现在我们就可以使用不同的npm命令切换环境了。
上面示例使用的 build 和 build test ，是模拟打包线上环境和测试环境。
例如线上环境的baseUrl为/api,测试环境为/proapi,就可以使用这个方式进行区分，只要使用不同npm命令即可。