Build Leads To Empty Html Page With Syntax Errors When Serving Vue App Using Node

I created a VueJs page with the CLI. I would like to show it to other people without having the Vue CLI or Node installed. Just like you normally open .html files in your browser I

Solution 1:

Since Vue is only a frontend library, the easiest way to host it and do things like serve up assets is to create a simple Express friendly script that you can use to start a mini-web server. Read up quickly on Express if you haven’t already. After that, add express:

npm install express --save

Now add a server.js file to your project’s root directory :

// server.jsvar express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
var hostname = '127.0.0.1';

app.listen(port, hostname, () => {
   console.log(`Server running at http://${hostname}:${port}/`);
 });

after that you could run :

 node server

and your project will be served at the given host and port

Assuming that you have already the dist directory, if you don't have it run :

npm run build

in order to generate it

Solution 2:

I'd try this from your project root.

npm install -g serve
serve -s dist

If you get the same issue with this maybe you've changed some default configuration in your vue.json.

Your code isn't working, as far as I can tell, because you're serving every http request index.html (which is why you see <, which is likely the <DOCTYPE...>. serve is a much safer, well thought out approach if you want to build it locally and take a look.