vue + webpack 打生产包,部署到nginx,页面空白描述
router/index.js
const router = new Router({
//mode: 'history', //后端支持可开
base: '/cms-admin/',
scrollBehavior: () => ({y: 0}),
routes: constantRouterMap
})
config/index.js
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: './static',
assetsPublicPath: '/cms-admin/', // If you are deployed on the root path, please use '/'
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta base="/cms-admin/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>cms-admin</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
nginx/config/nginx.conf
server {
listen 80;
server_name localhost;
charset utf-8;
root html;
index index.html;
location /cms-admin {
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /cms-admin/index.html last;
}
}
浏览器显示
求助大神要怎么解决。。。弄了好几天了
个人觉得应该是路由配置那里的问题,记得之前翻vue文档的时候,路由配置有两种模式,一种是默认的hash模式,另一种就是mode:'history'模式,这个需要后台配置支持,没见过base这种写法。