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

最近在做vue项目，想实现通过不同的命令，打包之后调用不同环境的api，防止来回切换不同的api出错。例如: npm run dev调用本地环境npm run test调用阿里测试环境apinpm run build 调用生产环境api先简单说一下创建vue项目的流程:1. npm install -g vue-cli 全局安装脚手架（只安装一次）2....

kayla_wang

13089人浏览 · 2018-05-31 09:53:38

kayla_wang · 2018-05-31 09:53:38 发布

  最近在做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.test.conf.js，将webpack.prod.conf.js内容复制过来。 

  然后修改webpack.test.conf.js文件 

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

  修改为const env = require('../config/test.env')； 

  在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 中修改 

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^