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

Question

Vue Js app在开发模式下工作正常，但是当我在服务器上传它时，它只显示一个空白页面。 所有资源都显示在开发人员控制台中。 我正在使用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:./ in vue.config.js 。