Vue Js 2/Vue CLI 3/托管时显示空白页

Question

Vue Js应用程序在开发模式下运行良好，但当我将其上传到服务器上时，它只是显示一个空白页面。所有资源都显示在开发人员控制台中。我正在使用vue路由器包。

VueJs 2/Vue-CLI-3

下面是我的App.vue

<template>
<div id="app">
<m-nav/>
<router-view></router-view>  
</div>
</template>
<script>
import Navbar from './components/Navbar.vue'
export default {
name: 'app',
components: {
'm-nav':Navbar
}
}

</script>

<style>
</style>

这是我的main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import HomePage from './components/HomePage.vue'
import Brochure from './components/Brochure.vue'
import Register from './components/Register.vue'
Vue.config.productionTip = false
Vue.use(VueRouter);
const routes = [
{
path:'/',
component: HomePage
},
{
path:'/download',
component: Brochure
},
{
path:'/register',
component: Register
}
];
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({
router,
render: h => h(App),
}).$mount('#app');

运行npm run build后，它显示了一个空白页面，尽管我可以在DOM<div id="app"></div>中看到一些内容

http://prntscr.com/lvasvo

我没有得到，我犯了一个错误！项目已经完成，但仍停留在这一部分！：(

Answer 1

遵循以下提示：

1. 使用<%=BASE_URL%>用于在index.html上写入的脚本和链接标记
2. 在项目根目录中创建vue.config.js，并配置生产和开发模式的公共路径，如：

module.exports = {
publicPath:
process.env.NODE_ENV === "production" ? "/" : "/"
}
};

只需使用相对路径，要了解更多信息，请阅读此链接：

https://cli.vuejs.org/config/#publicpath

创建config.vue.js

Answer 2

在我的案例中，问题出现在Router.beforeEach函数中，该函数位于router文件夹中的index.js文件中，用于添加路由保护。在将它从Vue 2升级到Vue 3后，我不得不重写它以使其工作。

Answer 3

刚刚在vue-cli3项目中遇到了同样的问题。我遇到这个问题的主要原因是我的应用程序没有部署在域的根上，而是部署在子路径上。

有几个棘手的配置：

1. vue.config.js(vue-cli3除外(：设置publicPath:/my-app/；

2. router.js(假设您的vue-router配置文件是这样的(：设置base:/my-app/；注意历史路由器模式：

   • 此模式需要额外的服务器端配置，我使用的是nginX，这是我的配置：

   location /my-app {
   alias /var/www/my-app;
   try_files $uri /index.html last;
   index index.html;
   }
   

   注意alias和root之间的差异。

   • 此模式不支持vue.config.js中的相对路径publicPath:./