如何定义 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 中，我设置了 base: 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 middleware for express 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')
  })

如何定义 vue.config.js 到生产？

How to define vue.config.js to production?

javascript

vue.js

vue-router