Vue打包后，访问路径可配置

源码资源网

Vue打包后，访问路径可配置
首先，在static下，创建config.json文件
config.json代码如下：

1. //config.json
   
2. {
   
3.     "BASE_URL": "http://localhost:8087"
   
4. }
   
5.    

复制代码

然后在main.js中，加入如下代码：

1. let startApp = function () {
   
2.   axios.get('./static/config.json').then((res) => {
   
3.    Vue.prototype.BASE_URL = res.data.BASE_URL;//将BASE_URL挂载在Vue原型
   
4.     new Vue({
   
5.       el: '#app',
   
6.       router,
   
7.       store,
   
8.       components: { App },
   
9.       template: '<App/>',
   
10.     })
    
11.   })
    
12. }
    
13. 
    
14. startApp()

复制代码

同时修改config目录下的index.js文件中的如下内容：

1. build: {
   
2.     // Template for index.html
   
3.     index: path.resolve(__dirname, '../dist/'+ projectName +'/index.html'),
   
4. 
   
5.     // Paths
   
6.     assetsRoot: path.resolve(__dirname, '../dist/' + projectName),
   
7.     assetsSubDirectory: 'static',
   
8.     assetsPublicPath: './',
   
9. 
   
10.     /**
    
11.      * Source Maps
    
12.      */
    
13. 
    
14.     productionSourceMap: false,
    
15.     // https://webpack.js.org/configuration/devtool/#production
    
16.     devtool: '#source-map',
    
17.      // Gzip off by default as many popular static hosts such as
    
18.     // Surge or Netlify already gzip all static assets for you.
    
19.     // Before setting to `true`, make sure to:
    
20.     // npm install --save-dev compression-webpack-plugin
    
21.     productionGzip: false,
    
22.     productionGzipExtensions: ['js', 'css'],
    
23. 
    
24.     // Run the build command with an extra argument to
    
25.     // View the bundle analyzer report after build finishes:
    
26.     // `npm run build --report`
    
27.     // Set to `true` or `false` to always turn it on or off
    
28.     bundleAnalyzerReport: process.env.npm_config_report
    
29. }

复制代码