vue项目总结之配置本地，测试，生产环境api

最近在做vue项目，想实现通过不同的命令，调用不同环境的api，防止来回切换不同的api出错。

例如: npm run dev 调用本地环境

npm run test 调用阿里测试环境api

npm run build 调用 生产环境api

先简单说一下创建vue项目的流程:

1. npm install -g vue-cli 全局安装脚手架（只安装一次）

2. vue init webpack 项目名称（创建项目）

3. npm install (安装依赖）

4. npm run dev （本地启动项目）

项目是用vue-cli脚手架生成的，生成后项目中就有下面这两个文件

一、在build文件下修改webpack.prod.conf.js文件

将const env = require('../config/prod.env')

修改为const env = process.env.NODE_ENV === 'test'
  ? require('../config/test.env')
  : require('../config/prod.env')

二、在build文件下新建test.js（复制build.js即可）

将process.env.NODE_ENV = 'production'修改为

process.env.NODE_ENV = 'test'

 

三、在config文件下新建test.env.js，将prod.env.js内容复制过来；

分别在dev.env.js,test.env.js,prod.env.js中定义变量API_ROOT，

dev.env.js

test.env.js

prod.env.js

四、project.json 中修改

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "test": "node build/test.js",
  "lint": "eslint --ext .js,.vue src test/unit/specs",
  "build": "node build/build.js"
},

上面中api只是示例，大家根据自己实际api进行配置。

配置API接口地址就可以直接用 process.env.JUMP_LINK，不用来回切换了。