Detailed introduction to vue-cli 3.0.x

This time I will bring you a detailed introduction to vue-cli 3.0.x, what are the precautions when using vue-cli 3.0.x, the following is a practical case, let's take a look.

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 was created using vue-cli 2, forcing us to use eslint made us uncomfortable. Some "build" and "config" that had nothing to do with the project made people feel uncomfortable. Since there are many corporate environments, the configuration of the test environment is required. Added ""tt": "node build/tt-build.js"". How should I use it to 3.0.x? 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 official website information. Because the information there is updated the fastest.
vue-cli
vue-cli Document

2. InstallationEnvironment

Here is the special header, it is recommended that you use npm install -g @vue/cli, through yarn global add @vue/cli, other settings need to be made, and some files are generated 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. Execution

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 test environment, a joint debugging environment, and an online environment. Reduce manual configuration and configure it once. Therefore, the "package.json "tt": "node build/tt-build.js"" type of configuration was added in 2.0.x, and many files could not be configured. In vue-cli 3.0.x, ".env" file configuration is supported. I have added ".env.development", ".env.production" and ".env.test" configurations 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. Start by specifying configuration

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

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

3.”.env “Configuration fileWriting

The content format of the configuration file is as follows,

 VUE_APP_*

For example: “.env.production” content 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 remove duplicate data when merging multiple arrays

What is needed to determine the type and size of uploaded images step

The above is the detailed content of Detailed introduction to vue-cli 3.0.x. For more information, please follow other related articles on the PHP Chinese website!