Write in front:

NPM run build is a command line used by vue-CLI to package projects. This article is about vue-CLI packaging some common pits, will try to write each step in detail, you can read the article, while trying to package. Friends in need can make a reference, like you can point bozan, or pay attention to it, I hope to help you.

Initialize a project:

Initialize a project here, because the packaging error can be caused by a variety of reasons, and avoid interference from other setup errors, the overall packaging process will be clearer from scratch.

The command line:

Vue init webpack build1(project name) // Go to project folder NPM installCopy the code

If it’s not clear how to initialize and run a project, you can refer to an article I wrote earlier: Portals.

Start packing trample pit

The command line:

// Package NPM run build directlyCopy the code

It’s a packed file

Vue-cli project file package location

First pit: file reference path

Now we have nothing to do with the project, we are in the initialization state directly packaged, open the dist/index.htmnl file and the entire page is blank.

Error: failed to load resources, then found the path problem, carefully look at the above load CSS reference path, here is the problem.

Climb the pit:

File location: config folder /index.js file

1. Change the assetsPublicPath property:

There are two assetsPublicPath properties in the file. To change the first one, change the assetsPublicPath property in the build:

assetsPublicPath:'/'//false
assetsPublicPath:'/'//trueCopy the code

The assetsPublicPath property specifies the root directory for compiling and publishing. ‘/’ refers to the root directory of the project and ‘./’ refers to the current directory.

2. After changing the Settings, repack.

Open the package file:

Reopen index.html

Error cause:

The dist folder

When you pack up dist, all files will be placed under the dist static folder. Index.html will load files, so the problem is that ‘/’ refers to the root directory of the project, and ‘./’ refers to the current directory. Which one to choose? Of course she chose to forgive her.

Second pit: Route history mode.

This pit is when you use the routing, in the absence of the back-end cooperate moved base to open the routing model of history, packaging the file will be a blank, a lot of people spend a lot of time on the pit, online tutorials are basically said the first pit, the pit rarely mentioned.

Image from vue-Router documentation

What it looked like before it was packed:

I’m using an example here, because it’s a newly created project and there are no other factors, when you turn on the history mode of the route, everything is fine during development

Pack the route before

What it looks like when packed:

After packaging, the path is also correct, but the page is blank

Solution:

// mode: 'history'// Turn this mode offCopy the code

This is not to say that this mode cannot be turned on, it requires the support of backend Settings, see routing documentation for details

Gzip file compression

By the way, share a very 6 optimization packaging method, it is also very easy to use, just download a plug-in, and then open a Settings.

Setting method:

This is actually a way to optimize the packaging of webpack, open this configuration if you do not download the plug-in, it will prompt you to download, download good.

Then, when packing, each JS and CSS file will be compressed into a folder with a gz suffix. Browsers that support G-Zip will automatically find if any gz files are found, load the gz file, and then unzip the file locally.

Opening this configuration meeting does not change the overall packaging volume, the dist folder, much. Here is a look at its compression rate and load improvement, can be said to be very large and obvious, you can try to see how easy to use.

The latter

You’ve made a lot of mistakes in packing, which may be related to each other. Sometimes you don’t make a mistake in one place, but you need to think about other places as well. The content above, be oneself step pit some experience, hope can help everybody.

Finally: if need to reprint, please put the original link and signature. Code word is not easy, thank you for your support! I write articles in line with the mentality of exchange records, write bad place, do not quarrel, but welcome to give directions. Then is the hope of watching the friends point a like, can also pay attention to me. Nuggets personal homepage

The above 2017.10.10