__webpack_public_path__动态配置路径

问题： 前端采用的是vue + webpack,项目部署时会动态配置一个相对路径，页面的js，css,img都是通过这种方式引入，但是publicPath是写死的（并没有根据后台传入的url动态去匹配）就会导致页面引用的js，css，img报404的错误

首先我们来说一下Output

Output

Output用于配置打包输出的文件，包括输出文件的文件名、输出路径、静态资源
eg:

output = {
	...
	path: __dirname + '/dist',
	publicPath: 'http://cdn.example.com/assets/[hash]/'
	...
}

• Path: 输出的路径，必须是绝对路径
• publicPath：用于设置打包过程中产生的静态文件的最终引用地址，静态文件的最终引用地址为：output.publicPath + output.filname

注意：如果静态引用地址运行时才能确定(即动态设置打包的路径)，可以在入口文件中设置

webpack_public_path

作用：__webpack_public_path__决定了output.publicPath的值，用于来指定应用程序中所有的资源的基本路径

使用：

1. 和后端协商好储存打包文件的变量
   index.html

window.static_url =  'http://123.com/'

2. 修改webpack输出配置项

output = {
  ...
  path: __dirname + '/dist',
  publicPath: ''
  ...
}

3. 新建配置文件index.js，在里面添加__webpack_public_path__配置项内容

__webpack_public_path__ = window.static_url // eslint-disable-line

4. 在入口文件main.js中引入配置文件（注意：一定要在最上面引入）

import './index'
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'