vue + webpack 打生产包,部署到nginx,页面空白

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;
    }
}


浏览器显示
图片描述
图片描述

求助大神要怎么解决。。。弄了好几天了

阅读 5.2k
2 个回答

个人觉得应该是路由配置那里的问题,记得之前翻vue文档的时候,路由配置有两种模式,一种是默认的hash模式,另一种就是mode:'history'模式,这个需要后台配置支持,没见过base这种写法。

新手上路,请多包涵

问题已找到,组件引用方式有误,导致本地开发时没问题,但是打包之后找不到模板

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题