新手 vue build 没改根路径配置的坑

2019.11.25

没有修改配置文件等直接 build 项目之后，打开 dist 中的 index.html 或者将 dist 文件夹上传至 GitHub 打开页面空白。

这里是因为没有修改项目资源路径，解决方法是：

打开项目根目录下的 config 下的 index.js 文件，在 build 部分将 assetsPublicPath: '/' 改为 assetsPublicPath: './'；

保存之后重新 npm run build 之后打开页面，页面结构就能正常显示出来了。

但是还有一个问题是：控制台报错，字体图标不能正常显示，找不到字体文件

同样是项目资源路径问题，解决方法是：

打开项目根目录下 build 中的 utils.js 文件，在控制 build 样式文件代码中添加 publicPath: '../../' ；

// Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'       // 添加
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

保存之后重新 npm run build 并打开 dist 中的 index.html 就可以看到页面正常显示了。