Vue Build后的项目的根路径配置方式

Vue Build后的项目的根路径配置问题

问题描述

使用Vue-cli 版本v3.12.1，build之后默认的根目录contextPath为/。

如果正式部署的路径不是/，则需要修改发布的根路径，否则会js和静态资源会报404问题。

修改方法

工程文件 /config/index.js修改build下的assetsPublicPath，该值为根路径配置。

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',  // 修改为需要地址
   }

同样的，如果要修改静态文件的名称，可以修改assetsSubDirectory。

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

没有修改配置文件等直接 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 就可以看到页面正常显示了。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。