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

Question

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

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. create vue.config.js上编写的脚本和链接标签，并配置生产和开发模式的公共路径，如：

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

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

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

创建config.vue.js

Answer 2

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

有几个棘手的配置：

1. vue.config.js (它是vue-cli3独占的)：设置publicPath:/my-app/ ;
2. router.js (假设您的base:/my-app/配置文件是这样的)：设置base:/my-app/；注意历史路由器模式：

- this mode needs extra [server side config](https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations), I'm using nginX, this is my config:

位置/my-app {别名/var/www.w/my-app；try_files $uri /index.html last；index index.html；}

注意alias和root之间的区别。

- this mode is not support relative path `publicPath:./` in `vue.config.js`.

​

Answer 3

在我的例子中，问题出在我在路由器文件夹内的index.js文件中添加路由守卫的Router.beforeEach函数中。在将它从Vue 2升级到Vue 3之后，我不得不重写它才能正常工作。