vue-cli3+ 搭建pc端管理项目（二, 不同环境配置[开发，测试，生产]）

项目开发中，会使用到不同的运行环境，例如：开发环境，测试环境，生产环境。

1. 配置打包命令

package.json文件中

修改 serve，build 命令，并添加 test 命令。如下：

// package.json
"scripts": {
  "serve": "vue-cli-service serve --mode development",
  "build": "vue-cli-service build --mode production",
  "test": "vue-cli-service build --mode test",
  "lint": "vue-cli-service lint"
},

--mode 指定了不同的运行环境

serve 命令不携带 --mode 时，默认运行环境为 development

build 命令不携带 --mode 时，默认运行环境为 production

2. 在项目根目录中创建 .env[mode] 文件

 .env.development

NODE_ENV = 'development'
VUE_APP_ENV = 'development'
VUE_APP_BASE_URL = 'http://localhost:8080'
VUE_APP_OUTPUT = 'dev'

.env.test

NODE_ENV = 'test'
VUE_APP_ENV = 'test'
VUE_APP_BASE_URL = '测试环境接口基本地址'
VUE_APP_OUTPUT = 'test'

.env.production

NODE_ENV = 'production'
VUE_APP_ENV = 'production'
VUE_APP_BASE_URL = '生产环境接口基本地址'
VUE_APP_OUTPUT = 'dist'

我这里主要配置了两个变量，BESE_URL 和 OUTPUT ，分别用来配置不同环境下接口基本路径和打包输出位置

变量使用： process.env[变量名称]         例如：process.env.VUE_APP_BASE_URL

也可以将 process.env 添加到 vue 原型上，然后通过 this 访问。例如：

//main.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

Vue.prototype.$config = process.env
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

如上配置，可通过 this.$config 访问

需要注意的是：

• 配置文件的后缀要与 package.json 的 scripts 的 --mode 的值要相等
• 变量必须以 VUE_APP_ 开头

3. 在根目录中创建 vue.config.js

配置静态资源路径 publicPath 和 打包输出位置 outputDir

// eslint-disable-next-line
const path = require('path') // 引入path模块,为配置别名做准备
function resolve (dir) {
  return path.join(__dirname, dir) // path.join(__dirname)设置绝对路径
}

module.exports = {
  publicPath: './', // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  outputDir: process.env.VUE_APP_OUTPUT, // 运行时生成的运行环境构建文件的目录(默认''dist''，构建之前会被清除)
  lintOnSave: true, // 是否开启eslint保存检测
  productionSourceMap: false // 是否在构建生产包时生成sourcdeMap
}

4. 将测试环境配置的打包输出文件夹添加到 .gitignore 文件中，避免 git 提交

我配置的输出文件夹为 test，配置如下：

// .gitignore
.DS_Store
node_modules
/dist
/test

至此，开发环境，测试环境，生产环境就配置完成了。

部署测试环境时，运行 npm run test ，打测试包，输出到项目根目录下的 test 文件夹

部署生产环境时，运行 npm run build ，打生产包，输出到项目根目录下的 dist 文件夹

项目地址：

github地址

gitee地址

系列文章：

vue-cli3+ 搭建pc端管理项目（一, 项目创建）

vue-cli3+ 搭建pc端管理项目（三, css预处理器scss使用）

vue-cli3+ 搭建pc端管理项目（四, 按需引入 element-ui，支持修改主题色）

vue-cli3+ 搭建pc端管理项目（五, axios 使用及封装）