Vue Js 2 / Vue-CLI 3 / При размещении показывает пустую пустую страницу - PullRequest
Новая
       60

Vue Js 2 / Vue-CLI 3 / При размещении показывает пустую пустую страницу

0 голосов
/ 15 декабря 2018

Приложение 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

Я непопасть, где я ошибся!Проект завершен, но застрял на этой части!(

1 Ответ

0 голосов
/ 06 мая 2019

Просто столкнитесь с той же проблемой в проекте vue-cli3.И моя основная причина возникновения этой проблемы - мое приложение не развертывается в корне домена, а в подпуть.

Существует несколько хитрых настроек:

  1. vue.config.js (это vue-cli3 эксклюзив): установить publicPath:/my-app/;

  2. router.js (при условии, что вы vue-router это конфигурационный файл): установить base:/my-app/;И остерегайтесь режима history router: 

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

    И остерегайтесь различий между alias и root.

    • этот режим не поддерживает относительный путь publicPath:./ в vue.config.js.
...