Vue项目自定义项目访问路径

最新推荐文章于 2025-06-14 10:48:13 发布
最新推荐文章于 2025-06-14 10:48:13 发布
阅读量1.5w 收藏 16
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端小白 文章标签： vue web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40651168/article/details/82711674
本文详细介绍如何在Vue项目中配置子路径，包括在index.html中添加metabase属性，在路由配置文件中设置mode和base参数，以及在项目配置文件中进行相应调整，确保资源正确访问。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 在index.html添加 meta base=”/shop/” (shop自定义的名称)

这里写图片描述

2. 在配置路由的index.js添加mode: ‘history’, base: ‘/shop/’

这里写图片描述

3.在项目的 config\index.js配置

这里写图片描述

**

**

4.以上就已经配置完了,最后项目的请求地址就是:

**
http://localhost:8083/shop/

注意: 所有的配置名称必须一致哦(shop), 这样才能保证资源的真确访问
vue cli 自定义项目架子，vue自定义项目架子，超详细
小十七的个人分享博客
05-06 1063
main.js// 引入vue，相当于引入vue.js，此处引入的vue.js是缺失版本，缺失缺失模板编译器，平时不用，最后打包的时候采用// 导入根组件// 关闭生产提示信息// 导入插件// 注册插件// 创建实例// render函数会被自动调用，被调用的时候，会自动传入一个参数，这个参数可以用来创建元素});// 为true，对于低级浏览器，会把node_modules里用得到的高级语法进行babel编译。
使用vue-cli自定义搭建项目步骤解析（Windows）
Leiccy
12-11 1184
快速搭建vue-cli项目步骤解析（Windows）前言一、下载安装Node.js二、使用步骤1.引入库2.读入数据总结 前言 提示：在正式搭建vue脚手架（vue-cli）之前，必须要确保电脑已经安装好了Node.js Node.js官网 提示：以下是本篇文章正文内容，下面案例可供参考 一、下载安装Node.js 1、去Node.js官网下载安装包。 2、安装步骤直接是默认一直点next即可，安装完成后去CMD命令行打印版本号，如正常显示则安装成功，本机的Node版本为v10.15.0 PS：如果报
vue实现配置全局访问路径头(axios)
10-16
今天小编就为大家分享一篇vue实现配置全局访问路径头(axios)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue——自定义项目访问路径
热门推荐
小欣儿的专栏
08-02 2万+
默认情况下，Vue项目的访问路径以 /#/，但我们有时候可能需要给项目定义一个明确的访问路径，如 /my_vue/ 等，这时我们需要修改配置，自定义项目的访问路径，方法如下： 1. 在index.html添加 <meta base=”/pay/”> (pay自定义的名称) <!DOCTYPE html> <html> <head> &...
Vue项目打包后动态修改IP地址
最新发布
weixin_44021888的博客
06-14 125
Vue项目打包后动态修改IP地址
关于vue-router路径配置的问题（此文主要是记录三级路由的访问路径，以及安装、路由组件、路由重定向）
qq_56715703的博客
03-09 4266
node路由：用户根据不同的url地址，来访问不同的页面vue路由（客户端）：组件结合路由规则来构建单页面应用。
vue路径使用方法及自定义路径介绍
coldriversnow的专栏
11-25 5540
1.首先说根目录 根目录用“/” 2. 当前文件夹 ./当前文件同级目录 3.当前文件夹的上一级 …/当前文件上一级目录 4.自定义目录 说明下 之前的vue是在webpack.base.conf.js 文件里配置的在这里直接加入就可以 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/胜利ue.esm.js', '@': resolve('src'), } }, 现在需要在v...
Vue Cli2.0项目自定义访问路径，并打包发布
weixin_45941687的博客
03-30 929
因为同一个服务器，同一个域名与端口，根目录已经配置了一个项目，所以第二个项目需要更改项目项目访问路径，不能使用 ' / ',这里使用了 " /base/ "作为根路径
Vue 自定义标签的src属性不能使用相对路径的解决
10-16
这个问题主要与vue-loader的资源路径处理规则有关，本文将详细介绍如何解决Vue自定义标签src属性无法使用相对路径的问题，并提供相关的解决方案和配置说明。 首先，需要理解的是，Vue.js在构建过程中使用了vue-...
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
08-27
解决Vue项目发布后背景图片加载失败的问题，关键在于理解生产环境和开发环境下的资源路径差异，并通过设置正确的公共路径或使用绝对路径来确保资源能够被正确加载。通过以上的方法，你可以避免因路径问题导致的背景...
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案是为了提升项目的性能和加载速度，尤其对于大型或者复杂的 Vue 应用来说，优化显得尤为重要。以下是一些关键的优化措施： 1. **不生成.map文件**： .map 文件主要用于在开发环境中进行...
vue自定义路径名
malanjun11的博客
10-20 288
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'img': resolve('src/assets/img'), 'css': resolve('src/assets/css'), } },
vue项目，访问路径#号的问题
快乐的小三菊的博客
03-30 4927
刚入手vue，有好多的疑问，目前遇到的是vue项目启动之后，输入http://ip:port，我发现浏览器里面显示的地址栏竟然是http://ip:port/#/，这个”/#/“不知道是什么东西，于是百度查了一下。 原因：对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也正是称之为单页面的原因。而vue-router默认hash...
Vue项目配置IP访问地址
m0_52244931的博客
03-06 2660
原来host:'localhost’更改为 host:‘0.0.0.0’将compilationSuccessInfo中的message更改。1、config/index.js文件。
vue devserver代理配置 接口路径+前端页面访问路径
html网页设计、web前后端网站制作、大学生网页设计作业、jQuery网站设计、uniapp小程序、vue网站设计、网页成品模板、期末大作业，各种源码应有尽有，持续更新中...
03-22 649
vue devserver代理配置 接口路径+前端页面访问路径
vue项目修改访问路径
qq_38317390的博客
11-02 8460
1.pubic/index.html 2.router/index.js 3.vue.config.js 4. 5.完成，最终访问地址：http://171.16.5.12:4528/npm/index.html#/login
VUE 在访问路径中添加项目名称
bingo
04-19 4837
1、修改路由配置 export default new Router({ routes:[ ...base ], mode:'history', base:'/sky-rxy-web/' }) 2、index.html中添加 <meta base="/sky-rxy-web/"> 3.vue.config.js添加 publicPath: ...
vue设置默认的路由路径
从入门到放弃的博客
06-04 1万+
在vue中设置默认的路由，即一进入页面就显示其中一个路由的内容，也就是设定重定向。 在router.js里添加以下代码即可： //默认打开路径，根路径会重定向到login上 { path: '/', redirect:'login' }, ...
部属vue项目，访问路径设置非根，显示白屏
weixin_42863883的博客
01-25 8192
问题：访问页面，返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.” 环境：使用nginx部属vue项目时，没有把访问项目设置为根路径 说明：当访问项目对应的nginx配置没有给项目的访问路径设置为根时，页面显示白屏，在network中可以看到所有资源都加载完成，index.html会显示“We’re sorry but XXX doesn’t work
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值