问题: 前端采用的是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/'
  1. 修改webpack输出配置项
output = {
  ...
  path: __dirname + '/dist',
  publicPath: ''
  ...
}
  1. 新建配置文件index.js,在里面添加__webpack_public_path__配置项内容
__webpack_public_path__ = window.static_url // eslint-disable-line
  1. 在入口文件main.js中引入配置文件(注意:一定要在最上面引入)
import './index'
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Logo

前往低代码交流专区

更多推荐