Vue + webpack pack production package, deploy to nginx, page blank

vue + webpack pack production package and deploy to nginx, page with blank description

router/index.js

const router = new Router({
  //mode: "history", //
  base: "/cms-admin/",
  scrollBehavior: () => ({y: 0}),
  routes: constantRouterMap
})

< hr >

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: "-sharpsource-map",
productionGzip: false,
productionGzipExtensions: ["js", "css"],
bundleAnalyzerReport: process.env.npm_config_report

}

< hr >

index.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 >

< hr >

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

< hr >

browser displays

how to solve the problem of asking for help from the great god. I"ve been working on it for several days

Mar.28,2021

personally, I think it should be the routing configuration. I remember that when I looked through the vue document, there were two modes of routing configuration, one is the default hash mode, and the other is mode:'history' mode, which requires backend configuration support. I have never seen this way of writing base.


the problem has been found, and the component reference method is incorrect, resulting in no problem in local development, but the template cannot be found after packaging

Menu