Express integrates Webpack packaged files dist

For me, the first contact front and back of the integration problem of small white, just beginning is a face, this problem full pit me a night add a morning, now write to summarize;

Front-end development: vue-cli+webpack;

Background development: Nodejs Frame Express;

After the front-end development, use localhost to properly access the server VUE-CLI comes with.

And in the background, at first I was directly in the expres of views and public on the front page development, so in some configurations are the last project, now integrate new projects, let me a little side.

Process:

1, into the front-end directory, NPM run build command directly package the front-end project into a dist file;

2, I will directly copy the dist file to the root directory of the server;

3, change the index file under the Routes folder, the route access '/' is changed to render the index.html under the Dist file;

Result: Access server, static resource 404;

Two improvement processes: (after extensive data search)

1. Find the Index.js file under the Config folder under the VUE-CLI project, and find the assetspublicpath of the build part; (Next, the role of Assetspublicpath)

2, change the Assetspublicpath to ' http://localhost:5777/dist ';

3, integrated into the Express server

Results:

Src= "Http://localhost:5777/dist/static/js/manifest.0d43cb9e3c7036b97742.js"

This time I was confused, this is not the right path?

But it was 404, and it was embarrassing.

Break into the Assetspublicpath knowledge point:

Look at the official documents, crappy English I was confused, I said the general meaning, Assetspublicpath can specify the output file's public address in the browser reference.

First of all, Webpack has written a reference to static resources in the dist file, that is, './static/js|css/*** ', that is, client access dist can load static resources when packing.

However, when Dist is deployed to express, the URL of the static resource when accessing the server is: Assetspublicpath + './static/js | css/* * *;

That's what the above code says.

But why is it still 404? This is about the issue of Express.

In the App.js configuration, there is a line of code:

App.use (Express.static (Path.join (__dirname, '/public '));

This means setting up express access to the static resources directory, that is, express needs to access the static files are from the public portal.

So the second case address actually accesses the src= "Http://localhost:5777/dist/dist/static/js/manifest.0d43cb9e3c7036b97742.js"

That is, the localhost:5777 in Assetspublicpath and the dist in express.static are repeated.

Express integrates Webpack packaged files dist