WebPack + Vue package generation public profile (domain name) convenient to dynamically modify

The domain name in the original project is packaged into the project. After packaging, it cannot be dynamically configured. You can only switch the domain name through different instructions, and test every day. The domain name and the official domain name come back and forth, and the rear Taiwan said that you can generate a configuration file so you don’t have to pack the direct modification of the configuration file, so I have this article.

  npm install --save-dev generate-asset-webpack-plugin  

Second Step New Profile

New ServerConfig.json will generate package profiles according to this file in the root of the project.

{“product”: http://text.com}
   
Three steps introduced into generate-asset-webpack-plugin

Const generateassetPlugin = Require (‘generate-asset-webpack-plugin “); const serverconfig = Require (‘ ../ serverconfig.json ‘); // introduced the configuration file in the root directory const createjson = function () {Return Json.Stringify (ServerConfig) }; // Plugins usePlugins: [// Generate a configuration file new generateassetplugin ({filename: ‘serverconfig.json “, fn: (compiL), cb) => {CB (null, createjson ());},}),]

  Fourth step in the configuration file  
Here, I share my project according to different requirements of different projects. In the use of the project, the project encapsulated AXIOS and handled the request to intercept

Service.Interceptors.Request.use (async (config) => { VAR BaseURL = process.env.base_api if (process.env.node_env === “production”) {AWAIT AXIOS.GET (‘ServerConfig.json’). Then (e => {baseURL = E.Data.ProduRl}) } config.baseurl = baseURL if (store.getters.Token) {// Let each request bring token config.headers [“x-token”] = getToken (); config.headers = {“x-token”: gettoken (), “Content-Type”: “Application / JSON-PATCH + JSON”};} Return Config;}, Error => {// Do SometHing with request error console.log (error); // for debug promise.reject (error);});

The part of the yellowing is the acquisition of the configuration file. Method, since the use of AXIOS is acquired, it is an asynchronous method, and processes according to the situation.
Good next, no need for the domain name BUILD
   
Summary

The WebPack + Vue package generation public profile (domain name) is convenient to generate public profile (domain name) for everyone, I hope that if you have any questions, please reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

If you think this article helps you, welcome to reprint, please indicate the source, thank you!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment