env配置开发、测试、正式环境

Pleine lune.

已于 2024-03-21 18:11:09 修改

阅读量972

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2024-03-21 16:48:57 首次发布

本文链接：https://blog.youkuaiyun.com/Kang_r/article/details/136912919

本文介绍了如何在VueCLI项目中通过创建不同环境的.env文件、修改config.js配置proxy和在package.json中设置脚本来自动切换服务器地址，简化打包上传过程并避免混淆，确保线上环境的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每次打包上传代码都要来回切换不同环境的服务器地址，不仅麻烦，而且经常会弄混乱，导致线上出错。

一、在根目录创建.env文件

具体查看官方文档：模式和环境变量 | Vue CLI

1、开发环境（.env.development）

NODE_ENV = development
VUE_APP_API_URL = 'http://*****'
VUE_APP_SERVER_URL = ''

2、测试环境（.env.test）

NODE_ENV = test
VUE_APP_API_URL = 'http://****'
VUE_APP_SERVER_URL = '/api'

3、正式环境（.env.production）

NODE_ENV = production
VUE_APP_API_URL = 'http://*****'
VUE_APP_SERVER_URL = '/api'

二、修改config.js

const {
  defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
  // 打包后的目录
  outputDir: process.env.outputDir,
  // 配置代理服务
  devServer: {
    proxy: process.env.VUE_APP_API_URL,
  }
})

三、配置运行方法（package.json）

"scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service build --mode test",   // 打包测试
    "pro": "vue-cli-service build && vue-cli-service build --mode test"  // 打包测试和线上
  },

打包命令为：

test：npm run test