vue-cli3抽离配置文件,动态修改打包后配置

　　由于项目有外部部署需求，对不同的环境前端调用后台的地址不一样，且不能提前预知必须到部署现场后才能确定后端地址，故需要将调用后端相关的配置抽离到文件中，打包后部署人员在方便现场修改。

思路如下：

　　1.由于项目中vue初始化部分有很多网络请求，所以必须在加载vue的内容之前引入配置，为解决异步请求问题直接在public/index.html的head中引入配置（vue在body后注入）。

　　2.配置放在js文件中，js文件中将配置对象放到localStorage中。有方法是将配置对象赋值给window顶级对象，感觉这样不安全，故采用放到localStorage的方式。

　　3.在需要使用配置的地方，反序列化localStorage，取出其中的配置项使用。

 

操作方法：

　1.在public目录下新建目录config，config目录下新建dynamicConfig.js文件，内容如下

let dynamicConfig = {
  server_url: "http://127.0.0.1"
  //自行加配置项
}
let jsonStr = JSON.stringify(dynamicConfig)
localStorage.dynamicConfig = jsonStr

　2.修改public下index.html，引入dynamicConfig.js。使用config相对路径为了方便开发环境和生产环境都能调用到。

　内增加如下一行

　3.配置webpack，使用copy-webpack-plugin插件将js文件打包到dist/config目录下。

　1)安装插件

npm install -save copy-webpack-plugin

　2)在vue.config.js中配置

const CopyWebpackPlugin = require("copy-webpack-plugin") //引入插件

module.exports = {
  //...
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([ //打包时执行拷贝
        {
          from: __dirname + "/public/config/dynamicConfig.js",
          to:   __dirname + "/dist/config/dynamicConfig.js"
        }
      ])
    ]
  }
}

　4.在js文件中读取配置

let endpoint = "http://127.0.0.1:8080"
//开发环境使用js中定义的配置，生产环境使用config/dynamicConfig.js中配置
if(process.env.NODE_ENV === "developement"){
  endpoint = "XXX" //自定义
}else{
  if(localStorage.dynamicConfig){ //使用从dist/config/dynamicConfig.js中读取的配置
    let config = JSON.parse(localStorage.dynamicConfig)

    if(config.server_url) endpoint = config.server_url
  }
}

　

　　动态修改配置方法：修改dist/config/dynamicConfig.js中server_url对应的值，修改后浏览器可能会有缓存哦~