vue-cli 根據不同的環境打包

前端小兵發表於2018-07-06
Vue

vue-cli 中build中build.js部分程式碼做如下修改

require('./check-versions')()

// process.env.NODE_ENV = 'production'

var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')

var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
// var spinner = ora('building for production...')
// spinner.start()
。。。。
複製程式碼

build中webpack.prod.conf.js做如下修改

// const env = require('../config/prod.env');
const env = config.build[process.env.env_config+'Env']
複製程式碼

config中的index.js 部分程式碼修改如下

module.exports = {
    build: {
        prodEnv: require('./prod.env'),
        testEnv: require('./test.env'),
        ppeEnv: require('./ppe.env'),
        index: path.resolve(__dirname, '../dist/' + new Date().getTime() + '/index.html'),
        。。。。。
複製程式碼

config中的index.js 配置代理跨域

// 配置代理跨域
    proxyTable: {
      '/api': {
        target: 'http://xxxxxxxxxxxx/', // 開發介面域名
        changeOrigin: true, // 如果介面跨域，需要進行這個引數配置
        pathRewrite: {
          '^/api': ''
        }
      }
    },
複製程式碼

在config中新建test.env.js

//測試環境
module.exports = {
  NODE_ENV: '"testEnvironment"',
  ENV_CONFIG: '"test"',
。。。
}
複製程式碼

在config中新建ppe.env.js

//預生產
module.exports = {
  NODE_ENV: '"ppeEnvironment"',
  ENV_CONFIG: '"ppe"',
hosturl: '"https://ppexxx"'
。。。
}
複製程式碼

安裝cross-env npm i cross-env -S

介面呼叫 src資料夾中新建api檔案；資料夾中新建api.js和baseURL.js

//--------------baseURL.js----------------
let baseURL = '/api';

// 判斷開發環境 設定不同的請求域名
if(process.env.NODE_ENV === 'development') {
  baseURL = '/api'; // 開發環境使用代理域名
} else if (process.env.NODE_ENV === 'testEnvironment') {
  baseURL = 'http://xxxxxxxxxxxx'; // 測試環境
} else if (process.env.NODE_ENV === 'ppeEnvironment') {
  baseURL = 'http://ppe'; // 演練環境
} else {
  baseURL = ''; // 生產環境
}
export default baseURL


//--------------api.js----------------
import axios from 'axios';
import baseURL from './baseURL.js'

// 建立axios例項
const Request = axios.create({
  baseURL: baseURL,
})
// 初始化預設post header
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 介面呼叫
export const queryAllRecord = params => {
  return Request.post(`app/xxx/xxxxxx`,params).then(res => res.data);
};

複製程式碼

package.json 修改

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build:test": "cross-env NODE_ENV=testEnvironment env_config=test node build/build.js",
    "build:ppe": "cross-env NODE_ENV=ppeEnvironment env_config=ppe node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },
複製程式碼

輸入指令

  • npm run dev 開發環境
  • npm run build:test 打包測試環境
  • npm run build:ppe 打包演練環境
  • npm run build 打包生產環境

相關文章