What are the new features after upgrading vue-cli 3.0.x to webpack4?

This time I will bring you what are the new features of vue-cli 3.0.x after upgrading to webpack4, what are the precautions after vue-cli 3.0.x is upgraded to webpack4, the following is the actual combat Let’s take a look at the case.

The project is being optimized recently. I took a look at the use of vue-cli3.0.x when I had time. It feels pretty good. Because the previous project used vue-cli 2 Created, forcing us to use eslint makes us uncomfortable. Some "build" and "config" that have nothing to do with the project make people feel uncomfortable. . Since there are many corporate environments, the configuration of the test environment is required. Added ""tt": "node build/tt-build.js"". to 3.0.x How should it be used? It feels much better to look at 3.0.x with these issues in mind.

1. Official website information

When learning technology, always check the information on the official website. Because the information there is updated the fastest.

vue-cli
vue-cli documentation

2. InstallationEnvironment

Here, I recommend you to use npm install -g @vue/cli. Through yarn global add @vue/cli, you need to make other settings and generate some files.

Delete for a few minutes.

npm install -g @vue/cli
# or
yarn global add @vue/cli
# 使用vue命令，创建项目(不同于cli2.0的init，create)
vue create my-project

If you use yarn global add @vue/cli to install, you need to enter the directory. Execute

yarn // 安装项目依赖
cd packages/@vue/cli // 目录
yarn link //添加 link `vue` 执行指命 。
vue create my-project // 创建项目 。

3. Multi-environment configuration

Because the company has a development environment, a testing environment, a joint debugging environment, and an online environment. Reduce manual configuration and configure it once. So "package.json" was added in 2.0.x "tt": "node build/tt-build.js"" type configuration cannot configure many files. It is supported in vue-cli 3.0.x ".env" file configuration, I added ".env.development", ".env.production" and ".env.test" configuration here .

1. Basic correspondence and default

  development is used by vue-cli-service serve
  production is used by vue-cli-service build
  test is used by vue-cli-service test

2. Specify configuration startup

To add other configurations, you need to specify the configuration below.

"dev-build": "vue-cli-service build --mode development",

3.”.env “

Configuration fileWriting

The configuration file content format is as follows,

 VUE_APP_*

For example: ".env.production" content is as follows

VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'

4. Adjust the environment configuration

 console.log(process.env.VUE_APP_MOCK_URL);
process.env.NODE_ENV // 特定
BASE_URL // vue.config.js 配置

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to request local json data in vue configuration

pandas dataframe implements row selection and slicing operations

Selenium cookie skips the verification code login implementation step-by-step explanation

The above is the detailed content of What are the new features after upgrading vue-cli 3.0.x to webpack4?. For more information, please follow other related articles on the PHP Chinese website!