vue項目分環境打包配置

解決方案一：nginx代理轉發

　　項目build后，通過nginx代理轉發

        location / {
            root   D:\myproject\my-vue\dist;
            index  index.html index.htm;
        }
        location /pyapi { 
            proxy_pass 'http://localhost:5002'; #配置后台服務器
    }

解決方案二：通過corss-env,修改相關配置

1.安裝：npm install cross-env --save-dev

2.修改各環境下的參數，在 config 目錄下添加 test.env.js，並修改dev.env.js, prod.env.js,修改后內容如下

test.env.js

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
 EVN_CONFIG:'"test"', API_ROOT:'"http://127.0.0.1:5003"'
}

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
 EVN_CONFIG: '"dev"', API_ROOT: '"http://127.0.0.1:5002"'
})

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
 EVN_CONFIG:'"prod"', API_ROOT:'"http://127.0.0.1:5000"'
}

3.修改 package.json 文件中的 scripts 內容.(NODE_ENV最好都設成 production，因為在 utils.js 只做了production 一種判定)

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build-test": "cross-env NODE_ENV=production env_config=test node build/build.js", "build-prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },

　　發布到test環境運行npm run build-test；發布到生產環境運行npm run build-prod;其他環境可根據此做類似配置

 

4.修改 config/index.js 文件中 build 參數，這里的參數會在 build/webpackage.prod.conf.js 中使用到

  build: {
    // Template for index.html
        // 添加test  prod 環境的配制
        prodEnv: require('./prod.env'),
        testEnv: require('./test.env'),
    
    
}    

5.對 build/webpackage.prod.conf.js 文件進行修改，調整 env 常量的生成方式。

// 個性env常量的定義
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']

6.修改 build/build.js 文件
刪除 process.env.NODE_ENV 的賦值，修改 spinner 的定義，調整后的內容如下：

'use strict'
require('./check-versions')()
// 注釋掉的代碼
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// 修改spinner的定義
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()

　7.在網絡請求處，設置baseUrl

// 設置baseURL
axios.defaults.baseURL = process.env.API_ROOT