[Vue] assetsPublicPath 调整 ‘./‘ 后首页无法访问资源问题

最新推荐文章于 2023-04-20 10:30:31 发布
最新推荐文章于 2023-04-20 10:30:31 发布
阅读量1.1k 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Coludidi/article/details/126241759
版权

为了部署时能在所有目录都能访问页面，所以需要修改 assetsPublicPath

  • 将 / 修改为 ./

 

问题1：修改之后，访问项目路由根目录时加载资源出现问题  

 

解决1：修改build目录下utils.js文件，在 return ExtractTextPlugin.extract 中添加 publicPath:'../../ 

 

 

!!!注：为了防止刷新404问题，路由最好还是使用 hash 哦，默认就是 hash 不要用 history

 

 

克劳迪尔
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于vue项目中history模式下静态资源路径错误的问题和assetsPublicPath的相关配置
weixin_43754275的博客
04-26 6410
关于vue项目中history模式下静态资源路径错误的问题和assetsPublicPath的相关配置背景问题解决我的原因分析首先概念:总结参考文章 背景 在做QQ第三方登陆时,一直报错回调域错误，貌似是回调域里不能有"#"字符，所以决定使用history的路由模式，后台node通过connect-history-api-fallback插件配置. 问题 配置完成之后发现，访问页面根目录的时候一切...
vue assetsPublicPath
miyayeeh的博客
02-22 1998
vue 中 /config/index.js， assetsPublicPath 的作用是便于访问打包后的静态资源,默认是相对于根 /, 当然如果直接把dist文件夹当成根来配置域名 可以什么都不用做。 这种情况主要用于 访问的地址不是根, 类似这种 http://local.wk.com/pro/frontend-vue/nssp/trunk/channel/dist/index...
VUE项目部署到二级目录下时，页面跳转异常。
qq_36130269的博客
04-20 387
【代码】VUE项目部署到二级目录下时，页面跳转异常。
vue打包assetsPublicPath为‘./‘和‘/abc/‘的两种情况
qq_44021541的博客
06-01 2676
vue 测试 和正式环境打包 （npm run build） assetsPublicPath路径可以设置为大致两种在nginx代理的方式也各有差异 第一种: assetsPublicPath: ‘ ./’ location / { root /home/lw/hy/admin/dist; index index.html index.htm; autoindex on; expires 30m; } 第二种: assetsPublicPath: ‘/qbcd/’
vue build 设置了 publicPath: “./“ 后页面空白
编程之路
06-02 1121
知识点记录
v2.6.10-vue.js&vue.min.js&vue.common.js&vue.runtime.js等14个资源
03-12
vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、...esm.js、vue.runtime.common.js、vue.runtime.common.dev.js等14个资源
关于vue.js发布后路径引用的问题解决
10-19
最近在vue.js项目发布后发现了一个关于路径的问题，发现网上关于这个的资料较少，所以给大家总结下，下面这篇文章主要给大家介绍了如何解决关于vue.js发布后路径引用的问题，需要的朋友可以参考借鉴，下面来一起看看...
Vue中通过<script></script>引入的Vue.js文件
04-28
<script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的文件位置决定的，我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次...
vue.global.js，Vue.js 框架的核心文件之一
最新发布
08-11
例如，你可以使用这个文件来创建全局的 Vue 实例，定义全局组件，添加全局指令，以及访问全局的 mixin、过滤器、插件等。 具体来说，`vue.global.js` 文件定义了以下内容： 1. `Vue` 对象：全局范围的 Vue 构造...
vue.min.js官方2.6.14版本
03-11
vue.min.js官方2.6.14版本
Vue-cli assets SubDirectory及PublicPath区别详解
10-14
主要介绍了Vue-cli assets SubDirectory及PublicPath区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue.config.js publicPath "./" npm run build无效的原因
diqigou2000的博客
09-30 8243
outputDir assetsDir indexPath必须填 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', outputDir: "dist", assetsDir:"static", indexPath:'index....
vue cli 打包npm install npm start 报错 Invalid options in vue.config.js: “publicPath“ is not allowed
wanmeifengfeng的博客
03-11 859
vue文档提示 baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath。但是用了之后还报错所以 凡是出现标题这个错误的都直接将 vue.config.js 里面的 publicPath 改成 baseUrl，即可
vue-cli 2.x版本中conf/index中assetsRoot、assetsSubDirectory、assetsPublicPath路径的含义
xk_initial的博客
09-05 4693
vue-cli 2.x版本中conf/index中assetsRoot、assetsSubDirectory、assetsPublicPath路径的含义 assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', assetsRoot 资源根路径 项目打包后存放的路径 即项目目录下的dist文件 assetsSubDirectory
解决 vue-cli index.js dev 配置中 assetsPublicPath 的值不能填 "./" 的问题
热门推荐
youngboy的博客
11-22 3万+
问题篇 最近使用frp代理开发微信vue应用，frp代理不直接暴露根目录，因为我的根目录已经被我的博客占用了，所以就使用nginx又代理了一层，访问方式从越来的 wechat.youngboy.vip 变成 wechat.youngboy.vip/proxy ，在游览器中 / 代表域名的根目录，./代表当前路径 比如: 域名 wechat.youngboy.vip 目录结构 --+ static...
vue项目的打包方式、生成dist文件夹、publicPath、hash、history、assetsPublicPath
04-01 4574
vue项目的打包方式、生成dist文件夹、publicPath、hash、history、assetsPublicPath
解决vue打包后出现页面空白和报错的问题
qq_31676725的博客
08-28 2611
publicPath
vue项目打包publicpath_Vue项目打包常见问题整理
weixin_40000301的博客
12-22 1883
Vue 项目在开发时运行正常，打包发布后却出现各种报错，这里整理一下遇到的问题，以备忘。1、js 路径问题脚手架默认打包的路径为绝对路径，改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath，把原来 ‘/’ 改为 ‘./’assetsPublicPath: './'}2、img 路径问题在 build/utils.js 文件中 Extract...
vue assets html,Vue-cli assets SubDirectory及PublicPath区别详解
weixin_39815943的博客
06-29 271
近期在参与用vue+ springBoot前后端不分离项目，遇到了前端打包后dist文件放到后台无法运行报404错误，static下的资源都访问不了问题。问题1：我们知道前后端不分离项目，一些静态图片、网页直接放在resource/static下，由于前后台分开开发，前端进行了跨域处理，dist文件放到后台就相当于本地静态资源，所以不需要跨域处理，可以将引入跨域的路径baseURL置空const ...
WARN "css.modules" option in vue.config.js is deprecated now, please use "css.requireModuleExtension" instead. INFO Starting development server... 98% after emitting CopyPlugin WARNING Compiled with 17 warnings 09:43:57 warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'computed' was not found in 'vue' warning in ./src/router/index.js "export 'default' (imported as 'VueRouter') was not found in 'vue-router' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'defineComponent' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'getCurrentInstance' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'h' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'inject' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'nextTick' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'onActivated' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'onDeactivated' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'onUnmounted' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'provide' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'reactive' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'ref' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'shallowRef' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'unref' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'watch' was not found in 'vue' warning in ./node_modules/vue-router/dist/vue-router.mjs "export 'watchEffect' was not found in 'vue'这个报错因为什么
06-09
这个报错是因为在使用Vue Router时，导入的Vue Router版本与当前项目中的Vue版本不匹配导致的。具体来说，Vue Router中使用了Vue 3的语法而当前项目中使用的是Vue 2，所以会出现一些语法上的错误。解决方法是将Vue ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值