Home Web Front-end JS Tutorial What are the new features after upgrading vue-cli 3.0.x to webpack4?

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

Apr 12, 2018 am 10:07 AM
vue-cli

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!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

The use of Vue-cli scaffolding and its plug-in recommendations The use of Vue-cli scaffolding and its plug-in recommendations Jun 09, 2023 pm 04:11 PM

Vue-cli is a scaffolding tool officially provided by Vue.js to build Vue projects. By using Vue-cli, you can quickly build the basic skeleton of a Vue project, allowing developers to focus on the implementation of business logic without spending a lot of time. To configure the basic environment of the project. This article will introduce the basic usage of Vue-cli and commonly used plug-in recommendations, aiming to provide a guide to the use of Vue-cli for beginners. 1. Basic usage of Vue-cli Install Vue-cli

A detailed guide to using Vue-cli in Vue A detailed guide to using Vue-cli in Vue Jun 26, 2023 am 08:03 AM

Vue is a popular front-end framework favored by many developers for its flexibility and ease of use. In order to better develop Vue applications, the Vue team has developed a powerful tool-Vue-cli, which makes it easier to develop Vue applications. This article will introduce you to the use of Vue-cli in detail. 1. Install Vue-cli Before using Vue-cli, you need to install it first. First, you need to make sure you have Node.js installed. Then, install Vue-c using npm

Vue-cli3.0 scaffolding to create Vue project steps and process Vue-cli3.0 scaffolding to create Vue project steps and process Jun 09, 2023 pm 04:08 PM

Vue-cli3.0 is a new scaffolding tool based on Vue.js. It can help us quickly create a Vue project and provides many convenient tools and configurations. Below we will introduce step by step the steps and process of creating a project using Vue-cli3.0. To install Vue-cli3.0, you first need to install Vue-cli3.0 globally. You can install it through npm: npminstall-g@vue/cli

Vue-cli scaffolding tool usage and project configuration instructions Vue-cli scaffolding tool usage and project configuration instructions Jun 09, 2023 pm 04:05 PM

Instructions for using Vue-cli scaffolding tools and project configuration. With the continuous development of front-end technology, front-end frameworks are attracting more and more attention from developers. As a leader in front-end frameworks, Vue.js has been widely used in the development of various web applications. Vue-cli is a command line-based scaffolding officially provided by Vue.js. It can help developers quickly initialize the Vue.js project structure, allowing us to focus more on business development. This article will introduce the installation and installation of Vue-cli

How to deploy nginx to access projects built by vue-cli How to deploy nginx to access projects built by vue-cli May 15, 2023 pm 10:25 PM

The specific method is as follows: 1. Create the backend server object upstreammixVueServer{serverbaidu.com;#This is your own server domain name} 2. Create the access port and reverse proxy rule server{listen8082;server_namelocalhost;location/{rootE:/mix_vue/dist;# Locate the directory of the project#indexindex.htmlindex.htm;try_files$uri$uri//index.html;#Configure according to the rules of the official website}location~\.php${proxy_p

What technologies are used to build vue-cli projects What technologies are used to build vue-cli projects Jul 25, 2022 pm 04:53 PM

Technologies used: 1. vue.js, the core of the vue-cli project, whose main features are two-way data binding and component systems; 2. vue-router, the routing framework; 3. vuex, the state manager for vue application project development ; 4. axios, used to initiate http requests such as GET or POST; 5. vux, a mobile UI component library specially designed for vue; 6. emit.js, used to manage the vue event mechanism; 7. webpack, module Load and vue-cli project packager.

Using ESLint in Vue-cli for code standardization and bug detection Using ESLint in Vue-cli for code standardization and bug detection Jun 09, 2023 pm 04:13 PM

With the continuous development of front-end technology, the problems we face have gradually become more complex, which not only requires our code to have a reasonable structure and good modular design, but also requires code maintainability and execution efficiency. In this process, how to ensure the quality and standardization of the code has become a difficult problem. Fortunately, the emergence of code standardization and bug detection tools provides us with effective solutions. Using ESLint for code standardization and bug detection in the Vue.js framework has become a common choice. 1. ESLint

How to deploy projects built by accessing vue-cli in nginx How to deploy projects built by accessing vue-cli in nginx May 28, 2023 pm 01:04 PM

Projects built in history mode need to rely on background technology. The nginx reverse proxy is used here to deploy the project. The specific method is as follows: 1. Create the backend server object upstreammixVueServer{serverbaidu.com;#This is your own server domain name} 2. Create the access port and reverse proxy rule server{listen8082;server_namelocalhost;location/{rootE:/mix_vue/dist;# Locate the project directory #indexindex.htmlindex.htm;try_files$uri$uri//

See all articles