Ggtcf

I have created my first SPA Vue project. It works locally, but not on a server. I wrote the server with node.js and made a production build from vue-front as 'dist' and put it to root of server.

It works otherwise, but when I refresh the browser or manually navigate to the page, I get the error unknown endpoint from my server. In stage of development I needed only this in vue.config.js

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

In my router.js I have set base: process.env.BASE_URL, which came as default when I created the app. I read somewhere that nowadays one should use a variable publicPath?

...
Vue.use(Router)

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

So how do I build for production with vue.config.js?

Your express server has to redirect the routes(your client routes) to index.html

Native Node.js example:

 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)
 )

or you can use connect-history-api-fallback middleware for express https://github.com/bripkens/connect-history-api-fallback#usage

Or you can do it by hands like following

// 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')
 )