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

更新时间：2024年03月01日 15:44:25 作者：明谨

这篇文章主要介绍了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 就可以看到页面正常显示了。

总结

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

您可能感兴趣的文章:

vue键盘事件keyup、keydown的作用
这篇文章主要介绍了vue键盘事件keyup、keydown的作用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
Vue中的前端crypto.js加解密
这篇文章主要介绍了Vue中的前端crypto.js加解密问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
关于vuex更新视图引发的一些思考详析
我们在vuex中操作数据时遇见视图不更新的情况,下面这篇文章主要给大家介绍了关于vuex更新视图引发的一些思考,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
vue3 setup中defineEmits与defineProps的使用案例详解
在父组件中定义String、Number、Boolean、Array、Object、Date、Function、Symbol这些类型的数据,使用defineEmits会返回一个方法,使用一个变量emits(变量名随意)去接收,本文给大家介绍vue3 setup中defineEmits与defineProps的使用案例,感兴趣的朋友一起看看吧
2023-10-10
vue 国际化 vue-i18n 双语言语言包
这篇文章主要介绍了vue 国际化 vue-i18n 双语言语言包的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
详解Vue取消eslint语法限制
本篇文章给大家分享了Vue取消eslint语法限制的相关知识点内容，有兴趣的朋友们可以参考学习下。
2018-08-08
el-form-item中表单项label和表单项内容换行实现方法
这篇文章主要给大家介绍了el-form-item中表单项label和表单项内容换行实现的相关资料,每个表单el-form由多个表单域el-form-item组成,需要的朋友可以参考下
2023-09-09
vue3自定义dialog、modal组件的方法
这篇文章主要介绍了vue3自定义dialog、modal组件的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
vue中input获取光标位置并追加内容
这篇文章主要给大家介绍了关于vue中input获取光标位置并追加内容的相关资料,vue通过当前的光标来进行插值,从而需要去获取光标所在的位置,需要的朋友可以参考下
2023-07-07
配置一个vue3.0项目的完整步骤
这篇文章主要介绍了配置一个vue3.0项目的完整步骤，从0开始配置一个vue项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04