我用从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代码。
谢谢。