大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容主要讲解“Vue如何去除路径中的#号”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue如何去除路径中的#号”吧!
成都创新互联公司专业为企业提供永康网站建设、永康做网站、永康网站设计、永康网站制作等企业网站建设、网页设计与制作、永康企业网站模板建站服务,10多年永康做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋。
众所周知,vue-router有两种模式,hash模式和history模式。
带#的则是hash模式。
将router中的mode设置为history就可以了
接下来有个问题,界面一刷新,就变404了!
网上搜了下,需要对后端环境进行一个配置。
这里只列举nginx的配置,其他的配置去官网看
先配置config/index.js
修改assetsPublicPath为根目录
module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', // hash 模式会默认的在此处 添加为 assetsPublicPath: './' productionSourceMap: true, ... } }
然后配置nignx
server { listen 0.0.0.0:12345; location / { root /home/我的应用跟目录; try_files $uri $uri/ /index.html =404; // 这个是重点 } error_page 404 /index.html }
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
到此,相信大家对“Vue如何去除路径中的#号”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!