Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to package and launch a vue.js project". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "how to package and launch a vue.js project" can help you solve the problem.

Vue.js project is packaged and launched

Recently, I have been insisting on writing a small vue.js development project every month. After the final development was completed, I thought of a question I answered to others a long time ago: how did the vue project come online? at that time, there were all sorts of strange answers. I was wondering, are these people swollen? vue officials have said that this framework only does the view layer, so it is not to copy these developed things directly to the server. And need to be packaged as a static file upload server.

Here I simply list the process.

First of all, you need to modify the configuration file before packaging. Many people encounter problems such as running blank after packaging. These problems are mainly path problems, so you need to modify the options in the index.js configuration file under config:

The first thing to modify in the above figure is the path of the static file. After packaging, the static file is in the current directory, so change it to. /

The second is that the environment is set to the production environment.

After modification, open cmd and run the following command to package:

Pay attention to the following tip, which tells you that the packaged file needs to be placed on the server before it can be opened, and cannot be opened directly using the browser. The packaged file structure is as follows:

At this point, we need to use the server way to access index.html. Many people here may also encounter some problems. For example, if you use proxytable to solve cross-domain problems during development, there will be no data here. You need to solve this problem by yourself through the server. Proxytable is only here to facilitate the development of cross-domain solutions.

The pit encountered by vue.js after packing

Recently, I am writing a project with webpack+vue. After staying up late for several days to change BUG, I finally finished writing the basic framework, and then I just need to add some small functions. Great! First, come to npm run build to pack it up and have a look.

Packing. Let's open it with the local server and have a look.

Well, I don't know if I don't see it. I was startled when I looked at it. How could there be so many pits? But as a positive IT practitioner, fill in the hole.

It was not rendered after packing.

What's the matter? as soon as you open it, tell me there's nothing. It's a prelude to trouble! Let's take a look at the error message and tell me that there is something wrong with the path, and silently take a look at my address bar and the directory where my files are located. It turns out that my packaged files are not placed in the root directory. At this time, we can put our two files in the root directory, but as an IT person with personality, of course we have to see if there are other ways. There is a faint premonition from the above path that static is directly relative to the root directory, indicating that when it is possible to package, it is possible to set an absolute path. If I change it to a relative path, it will be fine.

Let's take a look at config > index.js under the project file and find the assetsPublicPath:'/', under build inside. Change it to assetsPublicPath:'./', plus a dot to indicate the relative path, not the absolute path. Npm run build runs. Success.

Routing (router) mode:'history', caused the page not to be rendered

Why does the # in the address bar make me so uncomfortable? For me with mild obsessive-compulsive disorder, this is unbearable.

We set mode: "history" in vueRouter before the project is packaged and when we develop the project (npm start). Number # can be removed.

Here is a forced explanation:

The default hash mode of router uses the hash of URL to simulate a complete URL, so when the URL changes, the page will not reload, because for a normal page, changing the URl must cause the page to be changed, and the page will not be reloaded only when the query string and hash value in the URL are changed.

History mode of router, which makes full use of history.pushState API to complete the URL jump without reloading the page. There is no #.

Npm run build is being packaged.

What the hell, why my router part has not been rendered, this is the history pit, solution one, will go to the previous hash mode; solution two, set the routing name in routes.

This is because the router cannot find the components in the path, so it cannot be rendered. You just need to modify src > router > index.js, and add the component name after each path, and that's fine.

Here's a little problem:

For the sake of our time, let's put it in the root directory.

There is no problem on the home page. Test it one by one.

What the hell is this? the path is the same as other picture paths, and the picture also exists. Why are you so arrogant and wrong? Take a look at the console.

Combined with the previous. / it turned out to be a relative path problem, which is my development file assets under multiple picture folders.

This is the end of the content about "how to package and launch the vue.js Project". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.