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

【问题标题】：Vue Js 2 / Vue-CLI 3 / When hosted shows empty blank pageVue Js 2 / Vue-CLI 3 / 托管时显示空白页
【发布时间】：2019-05-16 13:13:20
【问题描述】：

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

我没有得到，我犯了一个错误！该项目已完成，但卡在这部分！ :(

【问题讨论】：

遇到了同样的问题，而且哈希模式在没有查询参数的情况下也能很好地工作

标签： vue.js vue-cli vue-cli-3

【解决方案1】：

遵循以下提示：

将用于写在 index.html 上的脚本和链接标签
在项目的根目录中创建 vue.config.js 并配置生产和开发模式的公共路径，例如：

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

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

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

创建 config.vue.js

【讨论】：

【解决方案2】：

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

有几个棘手的配置：

vue.config.js（vue-cli3独占）：设置publicPath:/my-app/；
router.js（假设你的vue-router配置文件是这样的）：设置base:/my-app/；并注意历史路由器模式：
- 这个模式需要额外的server side config，我用的是nginX，这是我的配置：
```
location /my-app {
         alias /var/www/my-app;
         try_files $uri /index.html last;
         index index.html;
}
```
注意alias 和root 之间的区别。
- 此模式不支持publicPath:./中的相对路径vue.config.js。

【讨论】：

【解决方案3】：

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

【讨论】：