VueJS 2 路由器在生产构建中不工作 [英] VueJS 2 Router is not working when it is in production build

问题描述

大家好，我有一个正在开发的 VueJS 项目，但是路由器在生产版本中停止工作.

我在网上查了一下，找到了这个解决方案

答案:所以我放的地方是 nginx.conf 我把那个 server { 标签放在了 http {

我检查并发现包含/etc/nginx/sites-enabled/*;我往里面看，那部分有 default.cnf，我看到已经有 server { 标签，并且有位置部分.

我只是根据 VUEJS 要求更改了该部分，然后它就起作用了.感谢支持.

解决方案

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

http {## ...##其他配置服务器 {听80；server_name yourservername.com;根 html/path_to_your_project;index index.php index.html;地点/{try_files $uri $uri//index.html;}}}

这是我的工作配置.确保您刷新了 DNS 缓存并重新启动了 Nginx.

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.

解决方案

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.

这篇关于VueJS 2 路由器在生产构建中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！