【VUE】记录一次 VUE中配置生产环境和开发环境方法

在Vue项目中，你可以通过修改vue.config.js文件来配置不同的环境。以下是一个配置生产环境（production）和开发环境（development）的示例：

// vue.config.js
 
module.exports = {
  // 基于环境变量来设置不同的配置
  publicPath: process.env.VUE_APP_PUBLIC_PATH,
  outputDir: process.env.VUE_APP_OUTPUTDIR,
  assetsDir: 'static',
  lintOnSave: process.env.VUE_APP_LINT_ON_SAVE,
  devServer: {
    port: process.env.VUE_APP_PORT,
    open: true
  }
}

环境变量可以通过以下方式设置：

1. 在环境变量中设置（例如在.bashrc或.bash_profile中为Unix系统，或environment variables设置中为Windows系统）：

# 对于 Unix 系统
export VUE_APP_PUBLIC_PATH=/my-app/
export VUE_APP_OUTPUTDIR=dist
export VUE_APP_LINT_ON_SAVE=true
export VUE_APP_PORT=8080
 
# 对于 Windows 系统，使用 `set` 命令
set VUE_APP_PUBLIC_PATH=\\my-app\\
set VUE_APP_OUTPUTDIR=dist
set VUE_APP_LINT_ON_SAVE=true
set VUE_APP_PORT=8080

2. 使用npm scripts在package.json中设置：

{
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "prod": "vue-cli-service build --mode production",
    "dev": "vue-cli-service serve --mode development"
  }
}

然后，你可以通过运行以下命令来启动或构建项目：

npm run prod  # 构建生产环境
npm run dev   # 启动开发服务器

这样，你就可以根据环境变量和npm脚本来配置不同的环境了。