鍍金池/ 問答/Linux  HTML/ vue + webpack 打生產(chǎn)包,部署到nginx,頁(yè)面空白

vue + webpack 打生產(chǎn)包,部署到nginx,頁(yè)面空白

vue + webpack 打生產(chǎn)包,部署到nginx,頁(yè)面空白描述

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


瀏覽器顯示
圖片描述
圖片描述

求助大神要怎么解決。。。弄了好幾天了

回答
編輯回答
墨沫

個(gè)人覺得應(yīng)該是路由配置那里的問題,記得之前翻vue文檔的時(shí)候,路由配置有兩種模式,一種是默認(rèn)的hash模式,另一種就是mode:'history'模式,這個(gè)需要后臺(tái)配置支持,沒見過base這種寫法。

2017年7月29日 15:54
編輯回答
神經(jīng)質(zhì)

問題已找到,組件引用方式有誤,導(dǎo)致本地開發(fā)時(shí)沒問題,但是打包之后找不到模板

2017年11月20日 16:58