解决vue 打包发布去#和页面空白的问题
1.vue项目中config文件下index.js中打包配置
build:{
//Templateforindex.html
index:path.resolve(__dirname,'../yiTownWebApp/index.html'),
//Paths
assetsRoot:path.resolve(__dirname,'../yiTownWebApp'),
assetsSubDirectory:'static',
assetsPublicPath:'/yiTownWebApp/',//这个地方使用绝对路径很重要
/**
*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',//去掉#，
base:'/yiTownWebApp/',//这个配置也很重要，否则会出现页面空白情况
scrollBehavior:()=>({y:0}),
routes:[
{
path:'/article',
name:'article',
component:article
},
{
path:'/footMark',
name:'FootMark',
component:FootMark
},
{
path:'/shareFootMark',
name:'ShareFootMark',
component:ShareFootMark
}
]
})
nginx配置：
server{
listen8080;
server_namelocalhost;
#charsetkoi8-r;
#access_loglogs/host.access.logmain;
#打包后的项目目录，一定记住这个地方带有项目名称
root/Users/a123/Desktop/vue/sgAdmin/yiTownWebApp;
indexindex.html;
location/yiTownWebApp{
#这个地方没有项目名称，因为请求的时候如果请求：http://localhost:8080/yiTownWebApp,nginx会查找/Users/a123/Desktop/vue/sgAdmin/yiTownWebApp/目录下的数据
root/Users/a123/Desktop/vue/sgAdmin;
try_files$uri$uri/@router;
indexindex.html;
}
//try_files$uri$uri/@router;和下边部分很重要，没有这部分发布二级一下的路由会出现js加载，但是也没空白的情况
location@router{
rewrite^.*$/index.htmllast;
}
}
以上这篇解决vue打包发布去#和页面空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
热门推荐
10 新人红包祝福语简短精辟
11 幼师给毕业祝福语简短
12 生日高考祝福语妹妹简短
13 下飞机祝福语简短英文
14 元宵发客户祝福语简短
15 爸妈金婚文案祝福语简短
16 新郎朋友红包祝福语简短
17 虎年五一祝福语大全简短
18 出阁宴祝福语姐姐简短