VueJS 2路由器在生产版本

Question

大家好我在开发中有一个工作的VueJS项目，但路由器停止在生产构建中工作。

我已在线查看并找到了此解决方案 https://github.com/vuejs-templates/webpack-simple/issues/11 但它并没有给我任何实用的信息。

routest.js

import News from './components/frontend/News.vue'
import News1 from './components/frontend/News1.vue'
export const routes = [
{path: '/news', component: News1},
{path: '/', component: News}
];

我的main.js'

import Vue from 'vue'
import App from './App.vue'

import {routes} from "./routest";
import VueRouter from 'vue-router'

Vue.use(VueRouter);
const router = new VueRouter({
    mode: 'history',
    routes
});
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

我的App.vue

 <template>
 <div id="app">
     <router-view></router-view>
 </div>
 </template>
 <script>
 export default {
 name: 'app',
 data () {
     return {
          msg: 'Welcome to Your Vue.js App'
    }
  }
}

我认为这里出了点问题

 export const routes = [
 {path: '/news', component: News1},
 {path: '/', component: News}
 ];

我穿上了我的服务器并输入了IP 出现主页面，但是当我输入链接时新闻没有。 http://xxx/news

有人可以协助吗？

更新1： https://scotch.io/tutorials/getting-started-with-vue-router如果我添加

<router-link to="/news">About</router-link>
<router-view></router-view>

在App.Vue，我可以从主页点击并转到新闻。但我希望通过直接链接去那里的自由。我怎么能这样做？

更新2 我将它添加到nginx.conf

的http部分内的nginx中

server {
   # hostname or ip or multiple separated by spaces
   server_name localhost example.com 192.168.1.1; #change to your setting
  location / {
       try_files $uri $uri/ /index.html;
  }
  }

当我直接从服务器请求链接时，它仍然没有。 仍然，当我想从服务器的确切链接它没有显示任何

解答： 所以我放的地方是nginx.conf我把那个服务器{tag放在http {

中

我查了一下，发现包含/ etc / nginx / sites-enabled / *; 我向里面看了一下default.cnf，在那部分我看到已经有服务器{tag并且那里有位置部分。

我刚刚根据VUEJS要求更改了该部分，然后就可以了。感谢您的支持。

Answer 1

你应该把它放在你的nginx.conf中：

http {
   ## ...
   ## other configuration

   server {
        listen 80;

        server_name yourservername.com;
        root html/path_to_your_project;

        index index.php index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

我的工作配置。确保刷新DNS缓存并重新启动Nginx。