【vue】vue根据不同环境(正式、测试)打包（一）

前提姿势

获取终端中输入的命令

下面的这个在webpack中会有个process对象 ，看下面图就知道使用 process.argv.splice() 就可以获取输入命令参数了

此处教程区分接口

这里是通过不同命令将修改接口前部分的地址或者修改单词。下面是我修改的，都是同一个链接，但后面的不一样。

// 正式的路径为：https://api.xxxx.com/ajmall
// 测试环境路径为 https://api.xxxx.com/dev

教程

1、进行代理跨域（可选）

此处我做代理为了跨域。此处是可选的，在 dev.env.js 文件中必须得配置下。

// 1、在config文件夹中，找到 index.js ，添加进代理代码段
'use strict'
// Template version: 1.2.4
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')
var webpack = require("webpack");
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/dev': {
        target:'http://api.xxxxx.com/dev',
        changeOrigin: true,   // 2、是否跨域，ture打开
        pathRewrite: {
         '^/dev': '/'
        }
       }
    },
    ...
}

2、dev.env.js 与 prod.env.js

在config文件夹的 dev.env.js 与 prod.env.js 分别本地和正式。本地开发的时候是 dev.env.js跑着，但是请求接口的话，会有跨域问题，直接做代理，也就是说 dev.env…js 只要配置下代理即可。打包后跑的是prod.env.js脚本，那么这里得区分下打什么样的包（测试还是正式）

// 1、在config文件夹中 dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ADMIN_SERVER: '"/dev/"', // 2、可选择用于代理（解决跨域）
  API: '""'
})

// 1、在config文件夹中 prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API: process.argv.splice(2) == 'dev'?'"/dev"':'"/ajmall"' // 2、此处是判断你输入，如果是输入的 npm run  build -- dev 那么就赋值给 process.env.API 。如果不是直接build的，后面是正式包。
}

3、axios 请求配置

此处是axios中配置下：

import axios from 'axios'
var ajax = axios.create({
    baseURL: process.env.ADMIN_SERVER || process.env.API, //  1、process.env.ADMIN_SERVER 是代理的URL。process.env.API是打包的 api 。這句判断是如果 代理没有，那么走后面的。这个是js短路
    headers: {
        appkey:'xxxxxxxxxxx'
    }
});

export default ajax;

4、完成

到了第三步是已经完成，检验下成果：

# 输入下面命令，就是打测试包
npm run build -- dev

# 输入下面的，就是打正式包
npm run build

打包好了，就放在服务器中看看是否请求链接不一样。