[JavaScript知识库]vue-cli配置多环境打包，以及启动项目

假设：项目有多个环境，如正式环境、测试环境、第三方。

问： 部署多台服务器，要求请求接口不同，如何做到同用一份代码，去做标识区分呢？

手把手-带你操劳起来

步骤：

#【已安装-直接忽略】安装。因为在window和mac下用到命令是不同的。这里要用到vue-cli-service，这个是解决不同系统之前的命令兼容问题

yarn add -g @vue/cli-service-globa

1、启用测试环境

第一步：设置。 在package.json中设置下面代码

?测试环境-启用? ?取名为 dev-test

"scripts": { // 其他的我就省略了
  "dev-test": "vue-cli-service serve --open --mode test"
}

第二步：项目中创建 .env.test 文件?

// .env.test的内容

// 测试环境
NODE_ENV = 'test'
VUE_APP_TITLE = 'http://xuchenghong/test'?
VUE_APP_VERSION = 0

第三步：项目中创建request.js 文件

// request.js 文件的内容 调用接口我用vue全家桶中的axios

import axios from 'axios';
import Vue from 'vue';

const service = axios.create({
  baseURL: process.env.VUE_APP_TITLE, // VUE_APP_TITLE是否很熟悉，就是.env.test文件中定义的
  timeout: 20000, // 过期时间
  headers: {
    'Content-Type': 'application/json'
  },
  changeOrigin: true, // 是否跨域
  withCredentials: true

})
// 请求拦截和响应拦截我就忽略了
export default service

第四步：项目建立API后端服务，比如 a.js

// a.js内容
import request from '@/utils/request'

// 获取列表信息
export function getRSAkey(data) {
  return request({
    url: '/ssp-user/encrypt/secret/get',  // 这API我随便取的
    method: 'get',
    data: data
  })
}

?下面我就不用教了吧

?1、打包测试环境

第一步：设置。 在package.json中设置下面代码

?测试环境-启用? ?取名为 build:dev-test

  "scripts": {
     "build:dev-test": "vue-cli-service build --modern --mode test"
   }

下面步骤-参考【启用测试环境】

学废了吗