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

遵循以下提示：

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

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

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

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

创建config.vue.js

Answer 2

vue-cli3项目遇到了同样的问题。我收到此问题的主要原因是我的应用未部署在域的根目录中，而不是在子路径中。

有几个棘手的配置：

None（仅限vue-cli3）：设置if match := re.search('I love (\w+)', statement): print(f'He loves {match.group(1)}') elif match := re.search("Ich liebe (\w+)", statement): print(f'Er liebt {match.group(1)}') elif match := re.search("Je t'aime (\w+)", statement): print(f'Il aime {match.group(1)}');
private ICommand _TextBoxPress; public ICommand TextBoxPress { get { return _TextBoxPress; } set { _TextBoxPress = value; this.NotifyPropertyChanged("TextBoxPress"); } } private void TextBoxGotFocus(object obj) { TestTimer.StopTimer(); TextBoxPress = null; }（假设您的vue-router配置文件是这个）：设置vue.config.js; 并注意历史记录路由器模式：
- 此模式需要额外的server side config，我正在使用nginX，这是我的配置：
```
publicPath:/my-app/
```
请注意router.js和base:/my-app/之间的区别。
- 此模式不支持location /my-app { alias /var/www/my-app; try_files $uri /index.html last; index index.html; }中的相对路径alias。

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

2 个答案: