vue +vue-cli+vue router ,npm run build 打包完页面空白，不显示URL的#号router模式为history

vue-cli 项目，基于github elm客户端框架，npm run build 之后页面一片空白，解决方法如下：

1，config/index.js

build: {

env: {

NODE_ENV: '"production"'

},

index: path. resolve( __dirname, '../gameBox/index.html'),

assetsRoot: path. resolve( __dirname, '../gameBox'),

assetsSubDirectory: 'static',

assetsPublicPath: './',

productionSourceMap: true,

// Surge or Netlify already gzip all static assets for you.

// Before setting to `true`, make sure to:

// npm install --save-dev compression-webpack-plugin

productionGzip: false,

productionGzipExtensions: [ 'js', 'css']

},

  

我的打包文件存放目录是gameBox, assetsPublicPath 这个设为相对当前路径“./” 是index中引用的script查找路径，不要和他项目写成绝对路径；

2，路由设置，如果你不介意url路径上有#号，那就把mode注释掉，直接默认为hash模式，#是hash模式的标志；如果介意，就加上或者改模式mode为history;

const router = new VueRouter({

     routes,

     mode: 'history',

     // mode: routerMode,

     strict: process. env. NODE_ENV !== 'production',

     scrollBehavior ( to, from, savedPosition) {

     if ( savedPosition) {

         return savedPosition

        } else {

             if ( from. meta. keepAlive) {

                 from. meta. savedPosition = document. body. scrollTop;

            }

         return { x: 0, y: to. meta. savedPosition || 0 }

        }

    }

})

3,如mode是hash，即为url路径存在#的，就这样就解决了页面不显示的问题，不用下看了。

    如果mode为history，那页面还是不显示的，怎么解决呢，见step4;

4, 改router,如果你打算访问路径是  自己域名/打包文件存放目录名/ ，eg: x.x.x.x/box（默认访问box文件夹下的index.html）

那所有的路由路径都加上‘/box’

export default [{

path: '/box',

component: App, //顶层路由，对应index.html

children: [ //二级路由。对应App.vue

//地址为空时跳转home页面

{

path: '',

redirect: '/box/page1'

},

{

path: '/box/page2',

component: page2

},

{

path: '/box/page3',

component: page3

},

{

path: '/box/page4',

component: page4

}

]

}]

此外，改所有项目中跳转的地址，前面都要加上'/box'

5，如果改之后npm run dev  直接localhost:端口号 是访问不了的，要localhost:端口号/box 才能访问.