Question

我正在使用vuejs开发一个应用程序，并使用vue-route进行路由。我创建了一个route.js：

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页面无法正常工作且出错“无法获取页面/内容“。请帮助我。

Answer 1

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

npm install --save express

将connect-history-fallback-api安装为依赖项：

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

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

更新package.json启动脚本，以便现在使用express而不是serve：

"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'。

Vue Routes在开发服务器中正常工作，但在生产中无法正常工作

1 个答案: