VueJs 2, NodeJs and reload page

问题

I have a question with VueJs and the refreshing page. When I refresh my VueJs app with specific URL (for example : /tag/1), an error occurs : "Uncaught SyntaxError: Unexpected token <". My server is created with NodeJs and I use ExpressJs. My templating engine is EJS. I have defined a route :

app.get('*', (request, response) => {
   response.render('layouts/index')
})

In the documentation for ExpressJs, it's possible to use a plugin "connect-history-api-fallback" to replace ".htaccess" of Apache but this cannot work.

let app = express()
app.use(history({
    verbose: true,
    index: '/'
}))

What is the issue ?

Thanks,

回答1:

This is happening because your client app (vue.js) is expecting to receive some valid JSON object, but your server is giving a HTML page.

When attempting to convert some string like <html><head>... into a javascript object, your JSON parser fails and gives that error. To replicate this locally, open your developer console and run the following command:

JSON.parse("<html></html>")

To find out what exactly is going wrong, you need to look into the network tab of developer console and look at the server responses for API requests - you expect JSON but server might be serving index.html

Assuming your server side is all good and handles API requests as expected, then it might be a simple error in your vue component - instead of loading your tag data from /api/tag/1 (which gets a valid JSON string), you might be attempting to load /tag/1 (which will only get your index.html).

来源：https://stackoverflow.com/questions/40464951/vuejs-2-nodejs-and-reload-page

标签

javascript

node.js

.htaccess

Vue.js

vue-router