Как определить vue.config.js для производства? - PullRequest
Новая
       1

Как определить vue.config.js для производства?

1 голос
/ 07 марта 2019

Я создал свой первый проект 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?

1 Ответ

0 голосов
/ 07 марта 2019

Ваш экспресс-сервер должен перенаправить маршруты (маршруты вашего клиента) в index.html

Пример Native 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')
  })
...