vue打包静态文件的路径报错
2020-01-16 本文已影响0人
八重代
使用 npm run build打包之后,访问index.html的时候会报引入的图片和字体找不到
解决办法
1、将引用的图片和字体都改成绝对路径
a、在build/webpack.base.conf.js中配置一下路径
'assets': resolve('src/assets'),这就是新添加的
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': resolve('src/assets'),
}
},
在页面中使用就是,字体文件放的位置就是项目名/src/assets/fonts下面
@font-face {
font-family: "PFM";
src: url("~assets/fonts/PingFang-Medium_0.ttf");
}
2、config文件夹下的index.js中修改 assetsPublicPath: './'
3、修改build文件夹下的utils.js代码
//在页面上搜索 fallback,然后再这一行的后面加上publicPath: '../../',
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../',
})