Detailed explanation of webpack problems in vue-cli 2.9.1

Vue-cli has been updated recently. When using it to build the project, I found that there are two missing files under the bulid file, namely dev-sever.js and dev-client.js. This article mainly introduces the latest vue-cli 2.9.1 There is a problem with webpack. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

vue-cli 2.8

vue-cli 2.9.1

Why is this?

Let’s check package.json

vue-cli 2.8

##vue-cli 2.9 .1

#It can be seen that the webpack version in the latest version of vue-cli has been updated to v3.6.0.

Now that it has been updated, let’s reopen the webpack configuration items.

vue self-starting browser settings

When we started npm run dev to execute this cli, we found that the browser would not start by itself

In this case, wouldn’t it be impossible to show off? No, no, it’s still possible, as long as we modify the configuration items

Let’s first see what our npm run dev executes

Continue to check the scripts of package.json Option dev configuration

vue-cli 2.9.1 package.json

By comparison, we will know that when we run npm run dev, it is actually Executed webpack-dev-server –inline –progress –config build/webpack.dev.conf.js

vue-cli 2.8 package.json

The difference from running npm run dev before may explain the reason why he wants to delete these two files, because the configuration of the latest version of webpack uses the webpack-dev-server plug-in to start browsing. You can view one of its API usage instructions on the official website

build/webpack.dev.conf.js and check its configuration under the running path

vue-cli 2.9.1 build/webpack .dev.conf.js

If you check the API, you will know that the open parameter is the reason for opening the self-starting server, but what is config.dev.autoOpenBrowser? , we can look up

which just corresponds to the definition of config. require is loaded in, that is, continue to view the corresponding path, which just corresponds to index.js under the config file. In require The default is that the index file under it corresponds to index.js

config/index.js

The autoOpenBrowser here corresponds to false, since we If you want to change it, just change it to true. Then the service can start automatically after restarting.

The port can also be changed to the corresponding startup port. In the latest version of vue-cli configuration, even if the set port is occupied, it will automatically be used in other settings. The port is increased by 1 to enable the service.

Hungry? APP interface setting problem

Since the two files in the bulid folder are not available, how to set the Hungry.me interface?

Before we understand the setting principle of the interface of the Are you hungry app? Since the data is obtained directly from the data.json file, we need to simulate a mock to make an interface. But in the settings of the Hungry? APP, the interface is ready when the service is started directly. This is why we can directly access its /api/seller and have corresponding data

vue-cli 2.9.1

Before vue-cli 2.9.1, the specific parameters were set directly in dev-server.js in

vue -cli 2.9.1

Method 1:

Go back to the starting point and configure the latest version of vue-cli The browser services are all in the webpack-dev-server plug-in, then we will modify it in webpack.dev.conf.js

Now our requirement is how to interface when the service is started The data is also ready, so let’s check its plug-in API. There happens to be one parameter which is devServer.before

devServer.before

is the solution to the problem. Make modifications

webpack.dev.conf.js

So we can send API request data directly

Method 2

If you know node, you can also make an api interface directly, enable the node service, and then the Are You Hungry project directly access this interface? Of course, there will be cross-domain issues and route mapping here, but webpack-dev-server can help you solve this problem. It mainly involves setting parameters, devServer.proxy, routing mapping, etc.

However, you still need to consider your own abilities. I recommend using the first method

Summary

Front-end technology updates so fast, we’d better do it every day To learn the corresponding knowledge, the main thing is that if the bottom layer can understand these problems thoroughly, we can solve them accordingly.

Related recommendations:

How to use vue-cli to develop multi-page applications

vue-cli quickly builds vue applications and implements webpack Detailed explanation of packaging

How to use vue-cli to build vue projects and webpack?

The above is the detailed content of Detailed explanation of webpack problems in vue-cli 2.9.1. For more information, please follow other related articles on the PHP Chinese website!