Vue路由在开发服务器上正常工作，但不能在生产中工作

我正在开发一个带有vuejs的应用程序，并使用vue-route进行路由。我创建了一个route.js为：Vue路由在开发服务器上正常工作，但不能在生产中工作

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import Content from './components/Content.vue' 

Vue.use(VueRouter) 

const router = new VueRouter({ 
mode: 'history', 
routes: [ 
    { 
     path: '/', 
     component: Home, 
     meta: { 
      forVisitors: true, 
      title: 'Univibe Plus', 
     } 
    }, 
    { 
     path: '/content', 
     component: Content, 
     meta: { 
      forVisitors: true, 
      title: 'Content', 
     } 
    } 
] 
}) 

export default router

上运行sudo npm run dev路由工作正常，但是当我创建使用sudo npm run build只/网页制作应用程序工作，/content页不能正常工作，并给予错误“不能让网页/内容”。请在这里帮助我。

来源

2017-08-30 NAVEEN KUMAR

你有没有试过*哈希模式*而不是*历史模式*？ – choasia

但是，如果我需要使用它没有散列，那么我该怎么办？ –

所以它适用于散列模式？如果是这样，则错误可能是由服务器配置引起的。 – choasia

我得到了这个问题的解决方案。从我的项目的根目录中安装快车（当然，它已经安装了，但其实只是添加此作为一个依赖）：

npm install --save express

安装连接历史，回退API作为一个依赖：

npm install --save connect-history-api-fallback

在项目的根目录下创建一个server.js文件。（请参见下面的脚本）。

更新的package.json启动脚本，现在将使用表达，而不是服务：

"start": "node server.js"

然后，我改变了我的server.js为：

// server.js 

const express = require('express') 
const path = require('path') 
const history = require('connect-history-api-fallback') 
//^middleware to redirect all URLs to index.html 

const app = express() 
const staticFileMiddleware = express.static(path.join(__dirname)) 

app.use(staticFileMiddleware) 
app.use(history()) 
app.use(staticFileMiddleware) 

app.get('/', function (req, res) { 
    res.render(path.join(__dirname + '/index.html')) 
}) 

app.listen(5000, function() { 
    console.log('Express serving on 5000!') 
})

为这个配置你的routes.js文件中应该有mode: 'history'。

来源

2017-08-30 13:01:11

Vue路由在开发服务器上正常工作，但不能在生产中工作

回答

相关问题