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

问题

Hi people I have a working VueJS project in the development however the router stops to work in the production build.

I have checked online and found this solution https://github.com/vuejs-templates/webpack-simple/issues/11 however it doesnt give me any practical information.

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}
];

My 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)
})

My 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'
    }
  }
}

I assume something is wrong here

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

I put on my server and entered with IP The main page appears but the news doesnt when I enter the link. http://xxx/news

Can someone assist please?

UPDATE 1: https://scotch.io/tutorials/getting-started-with-vue-router if I add

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

At App.Vue I can click from the home page and go to the news. BUT I want the freedom to go there by the direct link. How can I do that?

Update 2 I added this to the nginx inside the http section of the nginx.conf

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

still when I request the link directly from the server it doesnt go. Still when I wanted the exact link from the server it didnt show anything

ANSWER: So the place where I put was nginx.conf I have put that server { tag inside the http {

I checked and found include /etc/nginx/sites-enabled/*; I looked inside and there was default.cnf in that part I saw there was already server { tag and there there was location section.

I just changed that section according to the VUEJS requirement and then it worked. Thanks for the support.

回答1:

You should put that in your 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;
        }
    }
}

It's working configuration for me. Make sure you flushed DNS cache and restarted Nginx.

来源：https://stackoverflow.com/questions/46959917/vuejs-2-router-is-not-working-when-it-is-in-production-build

标签

Vue.js

vue-router