• 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相对路径为了方便开发环境和生产环境都能调用到。

     <head></head>内增加如下一行

    <script src="config/dynamicConfig.js"></script> <!-- 读入抽离的配置 -->

     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对应的值,修改后浏览器可能会有缓存哦~

  • 相关阅读:
    EOJ月赛-OLED【二维前缀和】
    牛客多校3-Operating on a Graph【dsu】
    牛客多校1——1or2
    牛客多校1——Minimum-cost Flow
    牛客多校2-Cover the tree
    P4304 [TJOI2013]攻击装置 【网络流】
    yesky wine供应系统题解【二分图匹配】
    P3355 骑士共存问题【最小点覆盖】【网络流24题】
    事件委托
    Javascript9张思维导图
  • 原文地址:https://www.cnblogs.com/wurijie/p/11904242.html
Copyright © 2020-2023  润新知