构建后Vue路由器发生故障

时间:2019-09-17 16:54:39

标签: vue.js

我用从Vue官方网站下载的模板在vue 3.10.0中开发了一个应用程序。与npm run serve一起运行时效果很好,但是在构建后,浏览器窗口为空白。构建成功,并且控制台中没有错误

我已将vue配置文件中的公共路径更改为它在服务器上的加载位置。

配置文件如下:

const webpack = require('webpack');
const isProd = process.env.NODE_ENV === "production";

module.exports = {
  publicPath: isProd ? "/facil-users/" : "",
  //publicPath: isProd ? "" : "",
  configureWebpack: {
    // Set up all the aliases we use in our app.
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 6
      })
    ]
  },
  pwa: {
    name: 'Facil app',
    themeColor: '#172b4d',
    msTileColor: '#172b4d',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: '#172b4d'
  },
  css: {
    // Enable CSS source maps.
    sourceMap: process.env.NODE_ENV !== 'production'
  }
};

路由文件如下:



const routes = [{
    path: '/',
    redirect: 'dashboard',
    component: DashboardLayout,
    children: [{
        path: '/dashboard',
        name: 'dashboard',
        component: () => import('./views/Dashboard.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/user',
        name: 'single user',
        component: () => import('./views/users/ViewSingleUser.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/users',
        name: 'users',
        component: () => import('./views/users/ViewUsers.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/profile',
        name: 'profile',
        component: () => import('./views/users/UserProfile.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/register-user',
        name: 'regiseter user',
        component: () => import('./views/authentication/NewRegistration.vue'),
        meta: {
          //isAdmin: true,
          requiresAuth: true
        }
      },
    ]
  },

]

const router = new VueRouter({
  mode: 'history',
  routes: routes
});

当我执行npm运行发球时,我应该让视图做出响应,就像我拥有它一样。从localhost / facil-users /的访问返回黑屏,我还按照vue官方网站上的建议添加了.htaccess代码。

谢谢。

0 个答案:

没有答案