美文网首页
vue打包静态文件的路径报错

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

作者: 八重代 | 来源:发表于2020-01-16 11:54 被阅读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: '../../',
    })
    

    相关文章

      网友评论

          本文标题:vue打包静态文件的路径报错

          本文链接:https://www.haomeiwen.com/subject/nmlmactx.html