这里写自定义目录标题
Vue2 History模式部署到Nginx页面空白问题
在使用vue写好了前端页面,部署到nginx,发现前端页面空白,作为一个vue新手,找了白天,才搞定,记录一下。
由于一台服务器上我部署了多个前端,故要在访问vue页面时多加一层路径"investment"
Nginx配置如下所示:
location /investment {
try_files $uri $uri/ /investment/index.html;
index index.html index.htm;
}
但是部署后,发现页面空白,网上搜索了一下,发现很多人都遇到过这个问题,说需要在vue.config.js上加上 publicPath: ‘/investment/’,但是加上后发现还是不得行。
module.exports = defineConfig({
publicPath: '/investment/',
transpileDependencies: true,
devServer: {
proxy:{
'http://localhost:8080/gateway/investment':{
target:'http://xxxxxx/',
changeOrigin: true
}
}
}
})
最后才发现,还需要配置Router
加一行:base: ‘/investment/’,
export default new Router({
base: '/investment/',
mode: 'history',
routes: [
{ path: '/', name: 'InputRepoter', component: InvestmentSheetUpload },
{
path: '/query',
name: 'InvestmentSheetQuery',
component: InvestmentSheetQuery,
props: route => ({ companyNameParam: route.query.companyName, reportTypeParam:route.query.reportType, dateParam: route.query.date})
},
{ path: '/list', name: 'InvestmentSheetList', component: InvestmentSheetList },
]
})
参考:https://blog.csdn.net/u011295864/article/details/107375774