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

刚刚在 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。

   • 该模式不支持相对publicPath:./路径vue.config.js。