基于webpack模板的vue项目打包后白板，还报错

北哒

已于 2022-03-23 08:30:59 修改

阅读量1.6k

点赞数

分类专栏： vue 文章标签：前端 javascript vue.js

于 2022-03-22 17:31:16 首次发布

本文链接：https://blog.csdn.net/m0_46678928/article/details/123666207

版权

vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

问题
.npm run build 后打开生成的dist文件白板，打开调试面板会报错
在这里插入图片描述
解决

1，在config里面的index.js文件里修改代码
在这里插入图片描述
assetsPublicPath后的参数修改为“./”

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    proxyTable: {},

2,以上办法解决不了去build下的utils.js文件里添加代码

在这里插入图片描述
添加一行代码publicPath : '…/…/ ',

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',
        fallback: 'vue-style-loader'
        
      })

3.最终办法，在build里的webpack.base.conf.js文件修改代码
在这里插入图片描述
在config.build.assetsPublicPath和config.dev.assetsPublicPath前拼接“./”

  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? './'+config.build.assetsPublicPath
      : './'+config.dev.assetsPublicPath
  },