vue项目打包访问页面路由和静态资源时加前缀

已于 2024-08-21 17:32:35 修改
阅读量57 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2024-08-21 17:28:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59287025/article/details/141398867
版权

在做项目时，可能会遇到一个项目打包给不同地方使用，有的地方需要有单独的路径拼接，这时候增加前缀来解决这个问题！！！

1、在src下新建一个.env.production文件定义访问路径

2、在vue.config.js中在pubilcPath下进行判断，是否需要增加打包前缀

3、在router文件夹下的index.js中的base增加判断，是否需要增加打包前缀

4、检测是否已增加前缀方法

当项目打包完成后，在dist文件中查看index.html静态资源是否含有已增加的前缀，然后再将项目运行起来访问下路径是否已增加前缀，这样就检查完成了。

根据不同需求来修改配置文件！！！

TechPainter
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
08-27
主要介绍了vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀的相关知识，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
vue打包静态资源后显示空白及static文件路径报错的解决
10-14
在使用Vue.js框架进行前端开发的过程中，经常需要打包应用以便将其部署到生产环境中。...通过上述的方法，可以较好地解决Vue打包静态资源后页面显示空白和static文件路径报错的问题，提高项目的稳定性和用户体验。
VUE项目增加前缀访问(包括页面及静态资源)
liutao_962464的博客
11-08 4298
vue项目前端加前缀(包括页面及静态资源)
Vue 打包后静态资源加前缀，页面路由加前缀，修改静态资源访问路径
热门推荐
qq_27312237的博客
10-20 2万+
记录一下做过的需求，了解的不多，有不对的地方请指出，谢谢~ 需求是：同一个的服务的同个端口号，根据后面接着的内容不同访问不同的管理系统。 举个例子：http://127.0.0.1:8088/admin 访问的是A管理平台 http://127.0.0.1:8088/test 访问的是B管理平台。 这需要给页面路由,以及访问的静态资源加admin， test。并且配置好nginx。 因为vue-cli版本的不同，文件结构不同，加前缀的方法也不一样。 vue-cli2: 由于我用的是...
vue项目打包加固定前缀（包括路由和静态资源）
最新发布
weixin_45665171的博客
02-19 2747
vue项目打包加固定前缀（包括路由和静态资源） 项目不在根节点部署时，需要使用前缀进行访问。打包时更改路由和静态资源相关配置。
vue项目 前端加前缀(包括页面及静态资源)
qq_20236937的博客
08-01 2628
vue项目 前端加前缀(包括页面及静态资源)
vue项目部署时路由加前缀
青山不改，绿水长流。
10-27 2108
1.在config / index 文件里修改dev(npm run dev本地启动项目时)和build(npm run build 打包时)下的 assetsPublicPath:”/前缀”2.在npm run build打好的dist包里 ，/dist/config/index.js文件中修改 [‘domain’]=“/前缀” 也可以。router.js里：export default new Router({ base:”/前缀" , })给路由加前缀：而且路由模式用的是hash，
vue 给静态资源增加路由前缀
Attitude_do_it的博客
02-11 3330
在vue.config.js中找到这段代码： 找到publicPath，这个就是静态资源的默认路径，默认值是/，也就是静态资源默认路径是你的域名+路径，所以我们只需修改publicPath的值，就可以达到加前缀的效果，修改后效果如下： 现在你页面上的所有静态资源路径都会加上web前缀了 ...
Vue项目路由加前缀
weixin_42949219的博客
10-16 954
1）静态资源前缀 vue.config.js /module.exports 配置 publicPath：“/前缀”2）路由前缀 route/index.js export default new Router({ base:”/前缀" , })
Vue项目部署路由加前缀
qqjuanqq的博客
07-08 2459
vue项目配置路由前缀
Vue项目nginx部署到线上，访问时加前缀解决方案
往事随风
01-09 1686
Vue项目nginx部署到线上，访问时加前缀解决方案
Vue打包后访问静态资源路径问题
10-16
Vue打包后访问静态资源路径问题的核心在于理解生产环境和开发环境的不同，以及正确配置静态资源的引用路径。通过修改`assetsPublicPath`、使用绝对路径、`require`引入或设置`publicPath`，可以有效解决这个问题。在...
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
11-30
最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下 一、首先修改config目录下的index.js文件 将其中build的...
vue填坑之webpack run build 静态资源找不到的解决方法
10-18
总的来说，解决Vue项目中Webpack build后的静态资源找不到的问题，关键在于理解`config/index.js`中的Webpack配置，特别是`assetsPublicPath`，它决定了静态资源的相对路径。在不同的服务器部署环境下，可能需要根据...
解决vue项目 build之后资源文件找不到的问题
10-14
在Vue项目开发过程中，我们经常会遇到这样一个问题：在完成项目的构建（build）后，静态资源文件，如图片、CSS或JavaScript文件无法正常加载，导致页面显示异常或功能失效。这通常与Vue的构建配置和资源路径有关。...
解决vue+webpack打包路径的问题
11-27
Webpack打包时，它会基于`publicPath`设置来生成引用资源的URL。为了让资源文件（如CSS、JS）能够正确加载，你需要将`publicPath`设置为`/vue-demo/`，这样Webpack才会在生成的HTML文件中插入带有所需前缀的引用： ...
关于vue-cli3打包代码后白屏的解决方案
10-14
在Vue CLI 3中，`publicPath`配置决定了生成的静态资源的URL前缀。如果设置不正确，浏览器可能无法找到对应的资源，导致白屏。默认情况下，`publicPath`为`/`，在某些服务器配置下可能需要将其更改为相对路径。例如...
基于gulp打包的vue单页
08-12
- `webpack`：模块打包器，可以将Vue组件和其他依赖打包成可部署的静态资源。 - `sass`/`less`：预处理器，将CSS预处理器语言编译成标准CSS。 - `autoprefixer`：自动添加CSS浏览器前缀。 - `uglify`：...
vue 项目 打包以后 页面刷新 路由参数消失
09-04
在 Vue 项目中，当我们使用 Vue Router 创建了带有路由参数的页面，并将项目打包后，如果我们在页面刷新时发现路由参数消失了。这是因为在打包后的项目中，Vue Router 将路由参数创建为前端路由，在刷新页面时，浏览器会向服务器发送请求获取页面，而服务器只返回打包后的静态文件，没有保存路由参数的信息。 为了解决这个问题，我们可以使用一些方法来保存并恢复路由参数。一种常见的方法是使用服务端渲染 (SSR)。通过 SSR，我们可以在服务器端将路由参数一同传递给浏览器，以便在页面刷新时能够恢复参数。但是，SSR 需要特殊的设置和服务器支持，并且会增加项目的复杂性和开发难度。 另一种方法是使用浏览器的本地存储机制，如 localStorage 或 sessionStorage。在页面加载时，我们可以将路由参数存储在本地存储中，然后在页面刷新后，通过读取本地存储中的参数来恢复。这种方法相对简单，但需要我们手动管理本地存储的数据，以确保数据的正确性和安全性。 除了以上两种方法，还可以考虑使用 URL 查询参数来保存路由参数。在页面加载时，我们可以通过读取 URL 查询参数来获取路由参数，并在刷新页面时，将参数添加到 URL 中以便浏览器重新获取。这个方法相对简单，但会在 URL 上暴露参数，可能对用户体验和安全性产生影响，需要谨慎使用。 综上所述，当 Vue 项目打包后，在页面刷新时路由参数会消失，我们可以考虑使用 SSR、浏览器本地存储或 URL 查询参数来保存和恢复路由参数。根据项目的需求和实际情况，选择最合适的方法来解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值