Question

我正在使用webpack模板创建一个vue-cli应用程序，到目前为止我运行：

npm run dev

一切都很完美，我的路线也很好。但跑完后：

npm run build

我使用新的index.html文件创建了我的dist文件夹，并使用以下命令使用我的server.js文件在生产中运行我的应用程序：

node server.js

server.js：

const express = require('express')
const serveStatic = require('serve-static')
const path = require('path')

const app = express()

app.use("/", serveStatic( path.join (__dirname, '/dist') ) )


const port = process.env.PORT || 5000
app.listen(port)

到目前为止，当我运行应用程序时，evrything渲染得很好，除非我点击链接进入另一个页面。在我看来，vue路由器不能用于生产，但在开发环境中工作正常。

当我点击引用我之前定义的/ contact路由的链接时，收到以下错误消息：

无法获取/联系

这是我的src / main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这是src / router / index.js文件：

import Vue from 'vue'
import Router from 'vue-router'
import Contact from '../components/Contact.vue'
import Main from '../components/Main.vue'
import CastMembers from '../components/castMembers.vue'


Vue.use(Router)

export default new Router({
  routes: [
    {path:'/', component:Main},
    {path:'/contact', component:Contact},
    {path:'/cast_members', component:CastMembers}],
  mode:'history'
})

Vue路由器在生产环境中不起作用

0 个答案: