Home > Web Front-end > JS Tutorial > How to use vue+webpack to make a project (with code)

How to use vue+webpack to make a project (with code)

php中世界最好的语言
Release: 2018-06-06 14:01:43
Original
2011 people have browsed it

This time I will show you how to use vue webpack to make a project (with code), and what are the precautions for using vue webpack to make a project. The following is a practical case, let's take a look.

Use webpack to configure different interface addresses for the production environment and release environment

During development, the front and back ends are developed simultaneously. The interface provided by the front end to call the back end is also within the LAN. However, when the project is pushed online, the interface will be obtained from the real server, and frequent switching between the test interface and the real interface is very disgusting.

The first step is to set different interface addresses in the webpack configuration file.

Open the dev.en.js file. Modify as follows:

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_ROOT: '"//192.168.1.8/api"' // 添加api地址
})
Copy after login

Also in the prod.env.js file

module.exports = {
 NODE_ENV: '"production"',
 API_ROOT: '"//www.baidu.com/api"'
}
Copy after login

The second step is to call the set parameters in the code

For example, mine: src/ config/api.js file

// 原来的API接口地址
var root = 'https://cnodejs.org/api/v1'
Copy after login
// 新配置的API接口地址
var root = process.env.API_ROOT
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:

React application development scaffolding use case

How to use js to convert images to base64

The above is the detailed content of How to use vue+webpack to make a project (with code). 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