How to modify the file package Vue interface address configuration

1. Background

Conventional vue project is divided into the local environment and production environment, as long as we configfolder dev.env.jsand prod.env.jscorresponding configuration can be. But recently the project done, involving the deployment of privatization, the production environment is the corresponding address is not unique. If each time to modify an address, and then package the files to deploy, cumbersome and inefficient process. So how to address environmental settings to be configured, do not need to build the code will be able to direct it into effect?

2, alternatives

After an investigation, the online program introduced two kinds:

1) is provided on a static config.js, parameters set to the windowglobal variables at. This program is indeed feasible, but, but, unsafe! ! ! If the request address is maliciously modified, the consequences of not very good ~
2) the use of generate-asset-webpack-pluginplug-ins, after a big lump configured to generate a static file, and then by way of a request to obtain the required data, this method can solve the security problem, but, but, a little trouble ah ~
Therefore, according to the actual blogger item, combining the two methods, and in the form of a solution.

3. The implementation of the program

Configuration Steps

The first step : In statica new folder config.json, you write the configuration write

{
// 基本访问地址
"BASE_URL": "http://webhmy.com"
}

On the staticfile, and it can be accessed directly.

Step Two : In main.jsthe request defined profiles, and placed Vue.prototypein the globally accessible, pay attention here to new Vue()put the request in execution, it is to prevent the time between the request and page rendering difference leads to a value less than acquisition, so this is more insurance.

// 定义外部接口可配置
import axios from 'axios'
let startApp = function () {
  axios.get('/static/config.json').then((res) => {
    // 基础地址
    Vue.prototype.BASE_URL = res.BASE_URL;

    new Vue({
      el: '#app',
      router,
      store,
      components: {
        App
      },
      template: '<App/>'
    })
  })
}

startApp()

Step Three : If you .vueuse file:

console.log(this.BASE_URL)
// http://webhmy.com

If some of the .jsfiles, you can call Vue before use:

import Vue from 'vue'
console.log(Vue.prototype.BASE_URL)
// http://webhmy.com

Package Modify

Execution npm run buildcan see the package folder staticunder the folder config.json, then you can modify the configuration, you can refresh the page.

[Supplement]
Because the request and the time difference of the packaging operation, even if it is a request of a local file, but sometimes find it requests slower than the first request of our system, this time will be invalid.

Solution: I believe our projects are carried out on the request of some packaging operations, as long as the value of the corresponding baseURL get into the real-time value Vue.prototype.BASE_URL, you can request to ensure that the interface can accurately get to the ~