vue打包静态文件的路径报错

使用 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: '../../',
})

你可能感兴趣的:(vue打包静态文件的路径报错)