VUE : vue-cli中去掉路由中的井号#操作
vue-cli项目中，如果想去掉url地址栏中的“#”我们可以用路由的history模式，这种模式充分利用history.pushStateAPI来完成URL跳转而无须重新加载页面。
只需要在路由表中，加入一行代码即可。
补充知识：vue打包部署去掉#注意事项
示例基于vuecli2.0脚手架生成的项目
1.vue项目中config文件下index.js中打包配置：
build:{
//Templateforindex.html
index:path.resolve(__dirname,'../dist/index.html'),
//Paths
assetsRoot:path.resolve(__dirname,'../dist'),
assetsSubDirectory:'static',
assetsPublicPath:'/dist/',//这个地方使用绝对路径很重要！
/**
*SourceMaps
*/
productionSourceMap:true,
//https://webpack.js.org/configuration/devtool/#production
devtool:'#source-map',
//Gzipoffbydefaultasmanypopularstatichostssuchas
//SurgeorNetlifyalreadygzipallstaticassetsforyou.
//Beforesettingto`true`,makesureto:
//npminstall--save-devcompression-webpack-plugin
productionGzip:false,
productionGzipExtensions:['js','css'],
//Runthebuildcommandwithanextraargumentto
//Viewthebundleanalyzerreportafterbuildfinishes:
//`npmrunbuild--report`
//Setto`true`or`false`toalwaysturnitonoroff
bundleAnalyzerReport:process.env.npm_config_report
}
2.路由配置：router文件夹下index.js：
exportdefaultnewRouter({
mode:'history',//去掉#，需要路由模式改为history
base:'/dist/',//这个配置也很重要，否则会出现页面空白情况
scrollBehavior:()=>({y:0}),
routes:[
{
path:'/facebook',
name:'Facebook',
component:Facebook
},
{
path:'/google',
name:'Google',
component:Google
}
]
})
3.剩下的不懂就要找你得运维或者后端开发小伙伴了，nginx配置：
server{
listen8080;
server_namelocalhost;
#charsetkoi8-r;
#access_loglogs/host.access.logmain;
#打包后的项目目录，一定记住这个地方带有项目名称
root/Users/qiilee/Desktop/vue/dist;
indexindex.html;
location/dist{
#这个地方没有项目名称，因为请求的时候如果请求：http://localhost:8080/dist,nginx会查找/Users/qiilee/Desktop/vue/dist/目录下的数据
root/Users/qiilee/Desktop/vue;
try_files$uri$uri/@router;
indexindex.html;
}
//try_files$uri$uri/@router;和下边部分很重要，没有这部分发布二级一下的路由会出现js加载，但是也没空白的情况
location@router{
rewrite^.*$/index.htmllast;
}
}
以上这篇VUE:vue-cli中去掉路由中的井号#操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。