如何将vue.config.js定义为生产？

Question

我已经创建了我的第一个SPA Vue项目。 它在本地工作，但不能在服务器上工作。 我使用node.js编写服务器，并从vue-front进行了生产构建（即“ dist”）并将其放置到服务器的根目录。

否则它可以工作，但是当我刷新浏览器或手动导航到页面时，我从服务器获取错误unknown endpoint 。 在开发阶段，我只需要在vue.config.js中使用它

module.exports = {
  devServer: {
    proxy: {
      "/api/*": {
        target: "http://localhost:3003",
        secure: false
      }
    }
  }
}

在我的router.js中，我设置了基础：process.env.BASE_URL，它是我创建应用程序时默认使用的。 我读到某个地方，如今应该使用变量publicPath ？

...
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
...

那么，如何使用vue.config.js构建生产环境？

Answer 1

您的快递服务器必须将路由（您的客户路由）重定向到index.html

本机Node.js示例：

 const http = require('http')
 const fs = require('fs')
 const httpPort = 80

 http.createServer((req, res) => {
   fs.readFile('index.htm', 'utf-8', (err, content) => {
     if (err) {
       console.log('We cannot open "index.htm" file.')
     }

     res.writeHead(200, {
       'Content-Type': 'text/html; charset=utf-8'
     })

     res.end(content)
   })
 }).listen(httpPort, () => {
   console.log('Server listening on: http://localhost:%s', httpPort)
 })

或者您可以使用connect-history-api-fallback中间件来表达https://github.com/bripkens/connect-history-api-fallback#usage

或者您也可以像下面这样手动操作

// Server index.html page when request is made
const clientRoutes = ['/', '/home', 'login', 'workspace']
app.get(clientRoutes, function (req, res, next) {
    res.sendfile('./public/index.html')
  })