本文共 1127 字，大约阅读时间需要 3 分钟。

区分开发、测试和生产环境是Vue项目日常开发中的关键任务。以下是详细的区分方法和实例说明。

1. 环境文件配置

在项目根目录下创建不同的环境文件，确保这些文件位于vue.config.js和src文件夹的同一层级。

1.1 生产环境文件

文件名：.env.production

内容示例：

NODE_ENV=productionDwpVUE_APP_TITLE=productionVUE_APP_TITLEDwp

1.2 测试环境文件

文件名：.env.test

内容示例：

NODE_ENV=testDwpVUE_APP_TITLE=testVUE_APP_TITLEDwp

2. 修改package.json脚本命令

在package.json中调整scripts部分，确保命令正确反映对应的运行模式。

修改示例：

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

3. 检查环境变量

在代码中通过process.env对象访问环境变量：

• process.env.NODE_ENV：显示当前环境（如development、production、test）。
• process.env.VUE_APP_TITLE：显示项目标题，根据环境不同显示不同标题。

4. 环境切换示例

在代码中根据环境变量判断，配置不同的资源地址或功能：

let envOne = "";switch (process.env.VUE_APP_TITLE) {  case 'testVUE_APP_TITLEDwp':    envOne = '测试环境地址';    break;  case 'productionVUE_APP_TITLEDwp':    envOne = '生产地址';    break;  default:    envOne = '默认开发地址';}export {envOne};

5. 注意事项

• 确保所有环境文件正确命名，并放置在项目根目录下。
• 在package.json中使用正确的命令，避免运行错误。
• 在代码中合理使用环境变量，确保不同环境运行时不会混淆配置。

通过以上方法，开发、测试和生产环境的区分会更清晰，减少配置错误，提升项目维护效率。

转载地址：http://hkbr.baihongyu.com/