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

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

php中世界最好的语言

Release： 2018-04-12 10:07:52

Original

3786 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!