Home > Web Front-end > JS Tutorial > body text

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

php中世界最好的语言
Release: 2018-04-12 10:07:52
Original
3821 people have browsed it

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
Copy after login
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 // 创建项目 。
Copy after login

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
Copy after login
2. Specify configuration startup

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

"dev-build": "vue-cli-service build --mode development",
Copy after login
3.”.env “

Configuration fileWriting

The configuration file content format is as follows,

 VUE_APP_*
Copy after login
For example: ".env.production" content is as follows

VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'
Copy after login
4. Adjust the environment configuration

 console.log(process.env.VUE_APP_MOCK_URL);
process.env.NODE_ENV // 特定
BASE_URL // vue.config.js 配置
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!