Vue官方脚手架分环境打包配置及接口环境切换

Vue官方脚手架分环境打包配置

 

1、配置各个环境所需要的使用的参数

//修改config/dev.env.js (开发环境)
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',//环境类型
  IS_ENCRYPTION:false,//是否加密
  WS_API:'"ws://cnblogs.com/"',//websoket地址
  BASE_API:'"http:cnblogs.com/"',//开发环境地址
})

//修改config/prod.env.js(生产环境)
'use strict'
module.exports = {
  NODE_ENV: '"production"',//环境类型
  IS_ENCRYPTION:true,//是否加密
  WS_API:'"wss:https://cnblogs.com/"',//websoket地址
  BASE_API:'"https://cnblogs.com/"'//生产环境地址
}

　　

2、打包配置

//修改build/webpack.prod.conf.js(npm run build 时会走这个文件)

const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')
改为
const env = require('../config/'+process.env.env_config+'.env')

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
改为
new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

　　

3、本地环境配置

//修改 build/webpack.dev.conf.js(npm run start 时走这里)
//引入文件
const ENV = require('../config/dev.env');//如果需要用生产环境把../config/dev.env改为../config/prod.env即可(项目需要重启才能生效)
plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
改为
plugins: [
    new webpack.DefinePlugin({
      'process.env': ENV
    }),    

　　

4、打包命令配置

//在package.json "scripts" 对象中新增以下内容
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
"build:dev": "cross-env NODE_ENV=production env_config=dev node build/build.js",

　　

5、获取配置好的全局变量

//以下变量能获取环境中的各个参数(任何文件下可使用该变量)
process.env
//console.log(process.env);//打印以下内容
{
  NODE_ENV: '"development"',//环境类型
  IS_ENCRYPTION:false,//是否加密
  WS_API:'"ws://cnblogs.com/"',//websoket地址
  BASE_API:'"http:cnblogs.com/"',//开发环境地址
}