Allow vue cli 3 development mode (npm run serve) to work on external server (e.g. nginx).
This is an guide for vue cli 3. You can also refer to the vue cli 2.x guide.
Setup vue cli 3 project
vue create <PROJECT_NAME>cd <PROJECT_NAME>npm run serveEnable HMR on external server
Edit vue.config.js.
const path = require('path')const webpack = require('webpack')module.exports = { devServer: { headers: { "Access-Control-Allow-Origin":"\*" }, }, assetsDir: process.env.NODE_ENV === 'production' ? 'static' : 'http://localhost:8080/', baseUrl: process.env.NODE_ENV === 'production' ? '/' // mess up assetsDir if this is blank : 'http://localhost:8080/',}Stop and run development server again.
npm run serveEmbed JavaScript in HTML
Edit the html hosted on external server (e.g. nginx).
<!doctype html><html lang="en"> ... <body> <h1>I am External Server</h1> <div id="app" /> <script type="text/javascript" src="http://localhost:8080/app.js"></script></body> </body></html>Browse you page (e.g. http://localhost/).
You could see [HMR] Waiting for update signal from WDS... in console log if HMR is successful. Try edit your files in Vue.js project and the page should auto update (just like npm run serve at http://localhost:8080/).
You might want to load different set of JavaScript for development and production environment, something like the following using Jinja2.
<!doctype html><html lang="en"> ... <body> {% if DEVELOPMENT_SERVER %} <script src="http://localhost:8080/app.js" type="text/javascript"></script> {% else %} <link href="/static/css/chunk-vendors.37ae32f6.css" rel="stylesheet"> <link href="/static/css/app.9b617004.css" rel="stylesheet"> <script src="/static/js/chunk-vendors.e012d10f.js" type="text/javascript"></script> <script src="/static/js/app.8cbd68ec.js" type="text/javascript"></script> {% endif %} </body></html>