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输入当我输入 link 时，主页出现了，但新闻没有出现。 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 我可以从主页点击并转到新闻。但是我想要直接 link 去那里的自由。我该怎么做？

更新 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;
  }
  }

当我直接从服务器请求 link 时，它仍然没有执行。仍然当我想要来自服务器的确切 link 它没有显示任何东西

答案： 所以我放的地方是 nginx.conf 我把服务器 { 标签放在 http {

我查了一下，发现include /etc/nginx/sites-enabled/*; 我看了看里面，那部分有 default.cnf 我看到已经有 server { 标签，还有 location 部分。

我只是根据 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。

VueJS 2 路由器在生产构建中不工作

VueJS 2 Router is not working when it is in production build

vue.js

vue-router