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

vue-cli 项目，基于github elm客户端框架，npm run build 之后页面一片空白，解决方法如下：1，config/index.jsbuild: {env: {NODE_ENV: '"production"'},index: path.resolve(__dirname, '../gameBox/i...

Qaye

2702人浏览 · 2018-04-11 16:09:35

Qaye · 2018-04-11 16:09:35 发布

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 才能访问.

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^