关于如何消除使用vue-cli生成项目后项目地址自动添加#号的操作方法

最新推荐文章于 2023-06-02 15:26:52 发布
最新推荐文章于 2023-06-02 15:26:52 发布
阅读量543 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hacker_NO_007/article/details/108182861
版权

1、很久没动过vue这个页面显示的项目了，今天启动了一下，发现再像之前那样输入要访问页面的网址之后，系统自动给你添加#，导致页面无法正确显示，直接上图：

 

2、基于此，此解决方法就是，在项目的index.js文件中，将路由配置改成history模式即可，直接上图：

 

hacker_NO_007
关注
vue-cli3项目打包后自动化部署到服务器的方法
10-14
这里我们将详细讲解如何使用 Vue CLI 3 实现项目的自动化打包与部署。 首先，确保你的项目已经使用 Vue CLI 3 创建，并且配置好相关的构建设置。Vue CLI 3 的打包命令通常是 `npm run build`，它会生成一个 `dist` ...
解决vue项目访问地址自动添加#号问题
Feb_ruary的博客
07-25 7205
新建一个vue项目，访问地址url后自动添加#号，很不美观。
vue去掉访问路径index.html,解决vue项目访问路径#号的问题
weixin_42360967的博客
06-30 4207
解决vue项目访问路径#号的问题发布时间：2020-08-19 11:29:49来源：亿速云阅读：118作者：小新解决vue项目访问路径#号的问题？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！刚入手vue，有好多的疑问，目前遇到的是vue项目启动之后，输入http://ip:port，我发现浏览器里面显示的地址栏竟...
关于Vue项目部署后访问页面资源找不到的问题
最新发布
m0_71831301的博客
06-02 3842
关于Vue项目的部署和部署后访问页面资源找不到的问题
vscode 无法识别vue文件后缀
qq_52940025的博客
05-18 7150
vue文件无法识别
vue 打包静态资源 二级域名 页面无法正常显示
qq_41399901的博客
04-24 2608
前言… 由于项目老大要求，服务器那边要放在二级域名下，这样能放更多项目（但其实一核一G放一个项目已经快爆了…） 不管怎样，还是要配置下的，毕竟以后一定会用到… 尝试 首先看一下 vue 关于打包的配置文件 这里现在又两个关于 build 的文件夹 在经过对这几个文件进行排查之后，我发现 config 下的 index.js 是关于打包路径的重要配置文件 大概长这样 'use strict' //...
Vue-cli3生成的Vue项目加载Mxgraph方法示例
10-15
以下是一个详细的步骤指南，教你如何在Vue-cli3生成的项目中加载并使用Mxgraph。 首先，你需要确保已经安装了Vue-cli3。如果还没有安装，可以通过以下命令全局安装： ```bash npm install -g @vue/cli ``` 接下来...
使用electron将vue-cli项目打包成exe的方法
10-17
如果你还没有项目，可以通过命令行使用vue-cli来生成一个新的项目。 2. **安装Electron及其打包依赖**：在项目根目录下，你需要安装electron和electron-packager（或electron-builder）。使用npm命令进行安装，如`...
Vue-cli项目部署到Nginx服务器的方法
10-16
Vue CLI 是一个基于 Vue....以上内容详细介绍了 Vue CLI 项目如何部署到 Nginx 服务器，包括单项目部署、多项目部署以及端口代理的配置方法。希望对开发者在实际工作中有所帮助，如果有任何问题或疑问，欢迎提出讨论。
Vue-CLI 3.X 部署项目至生产服务器的方法
10-17
当我们使用 Vue-CLI 3.X 创建的项目开发完成后，通常需要将项目部署到生产服务器上，以供用户访问。Vue-CLI 3.X 的项目构建完成后会生成一个 dist 目录，这个目录下的文件包含了所有静态资源，可以被静态文件服务器...
解决使用vue-cli生成项目后项目地址自动添加#号的问题
weixin_33832340的博客
11-22 649
vue-router官网https://router.vuejs.org/zh/guide/ vue的路由在默认的hash模式下,url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式（不带#号）也会有一些应用场景. 将路由配置成history模式，代码如下： export default new Router({ mode: 'histor...
vue项目地址栏自动加#
peppa_pig的博客
01-16 2541
vue的路由在默认的hash模式下,url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式（不带#号）也会有一些应用场景. 1、将路由配置成history模式的方法： 配置路由模式，例如： export default new Router({ mode: 'history', routes: [{ path: '/', name: '...
【最新版SpringBoot】SpringBoot集成Vue打包后的dist应该如何配置
Guevara的博客
12-20 6124
概述 最近项目组后端需要一个简单的web后台，于是用Ant Design Vue撸了一个页面，嫌麻烦也就没有前后端分离了。骚操作大致归纳如下： Vue 打包后得到 dist 将 dist 下生成的静态文件拷贝到 SpringBoot 的 resources/static 目录下 但是过程中遇到几个问题，既然踩过坑那么久将其记录下来，防止有和我一样的同学们重复踩坑。 Vue的两种路由模式 ...
vue2开发中如何去掉地址栏中的#号
weixin_30509393的博客
08-08 374
在vue项目的开发中，对于新手的我们，进入项目文件夹后，在文件夹 的如图所示位置： 输入cmd调出dos命令窗口，然后开始输入npm run dev命令运行 如图 （红色部分为项目存放路径）按enter键开始启动node服务器 运行成功，然后可以在浏览器中输入localhost:8080(端口号可以自己设置）访问。 这是我们可以看到地址栏中有个#号，可是在实际访问地址的经验...
【Vue】去掉默认地址栏的#以及后续问题
coralime的博客
02-24 2147
启动vue项目后，地址栏会默认带一个# 原因是vue-router提供了两种模式，一种Hash模式（默认），一种History模式。 vue-router 默认为 hash 模式，当 URL 改变时，页面不会重新加载，只是根据 hash 来更换显示对应的组件，这就是所谓的单页面应用。 在Hash模式下路由地址会默认带一个#，修改成History模式就行了。 在/router/index.js页面下，修改mode方式 const router = new VueRouter({ mode:
vue 地址去掉#，tomcat部署
SHUIYI_24的博客
07-31 2914
vue-cli开发过程中访问地址都带有#，看着不好看,下面我就来说说如何去掉它吧 1.将路由配置中的 mode 改为 history 修改mode 为history后 npm run dev 启动项目你会发现访问的地址再也没有‘#’了，但是当你打包部署后会发现资源都无法访问 此时就需要做下面的操作了 2.配置项目名称 在下面的两个index.js文件中配置项目名 注：打包后...
vue项目去掉地址中的#
tian_jiangnan的博客
05-07 1074
在router下面的index.js下面添加如下代码 mode:"history",//去除哈希值的#号 刷新页面就好了,此时没有/#了
开发环境中vue项目去掉url访问链接中的#
liuxy_236的博客
01-21 2165
0、前言 大家在开发vue项目的时候，常常会发现url中带有#号，用webstorm开发vue项目的时候，会默认在url中带有#号 例如启动后的链接：http://0.0.0.0:18000/#/，端口配的是18000 本人刚入行前端开发，特此记录下自己去掉#的过程，中幼稚处不少，望各位路过大神高抬贵手 本人的项目链接：http://0.0.0.0:18000/#/api/newsList...
springboot+vue结合，后端学习前端（三）（前端拦截器+后端拦截器）未登录访问其他页面，直接进入登陆界面
m0_54765221的博客
02-25 3377
处理#号问题，前端拦截器应用于前后分离项目，后端拦截器应用于合并的项目
Vue-CLI自动化生成表格和空白页面脚本
本文档主要介绍了如何利用Vue-CLI进行前端工程化的自动化页面生成，以提高开发效率。在基于vue-cli的项目中，每次新增页面通常需要手动创建`.vue`文件、配置路由，这是一项繁琐的工作。作者提出了一种通过配置文件的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值