Web Front-end
JS Tutorial
An introduction to how projects built based on Vue-cli interact with the backend
An introduction to how projects built based on Vue-cli interact with the backend
This article mainly introduces and explains in detail how projects built based on Vue-cli interact with the backend. The content is quite good. I will share it with you now and give it as a reference.
During this period of time, I have been using vue for development. I have used it before, but most of it used some simple data binding. After going through a lot of pitfalls, I summarized it. I hope it will be helpful to friends who have just started to struggle.
Frequently Asked Question 1: After setting up the environment with vue-cli, the local domain name and the domain name of the test environment are inconsistent. How to access the backend interface across domains?
Find index.js in the config directory and add the following under dev:
proxyTable: {
'/api':{//指定以/api开头的接口都走代理
target:'https://yhhdtest.moguyun.com',//需要连接后台接口的域名
changeOrigin:true,//支持跨域
pathRewrite:{
'/api':''
}
}
},The above configuration is actually dev- The server uses the very powerful http-proxy-middleware package. For more advanced usage, please check its documentation.
Request/api/getGame The actual request sent is https://yhhdtest.moguyun.com/getGame
Configure a background request suitable for local and production environments
After configuring according to the above, the local environment can successfully interact with the background across domains. However, each interface must be preceded by an unnecessary /api prefix, which is actually inconsistent with our production. At this time we need to do some configuration and distinguish it through compilation.
Find dev and prod respectively under index.js (some projects may be extracted directly and made into separate files)
dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST:'"/api/"'
})prod.env.js
module.exports = {
NODE_ENV: '"production"',
API_HOST:'""'
}The key point is API_HOST, our request at this time You can write like this
process.env.API_HOST+'/getGame'
The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
About vue’s ideas for solving cross-domain routing conflicts
About vue.js front-end and back-end data Interaction operation of submitting data
Introduction to the process of reconstructing multi-page scaffolding based on vue cli
The above is the detailed content of An introduction to how projects built based on Vue-cli interact with the backend. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Turn on split-screen interaction in win11
Dec 25, 2023 pm 03:05 PM
In the win11 system, we can enable multiple monitors to use the same system and operate together by turning on split-screen interaction. However, many friends do not know how to turn on split-screen interaction. In fact, just find the monitor in the system settings. The following is Get up and study. How to open split-screen interaction in win11 1. Click on the Start menu and find "Settings" 2. Then find the "System" settings there. 3. After entering the system settings, select "Display" on the left. 4. Then select "Extend these displays" in the multi-monitor on the right.
Vue3+TS+Vite development skills: how to interact with the backend API
Sep 08, 2023 pm 06:01 PM
Vue3+TS+Vite development skills: How to interact with the back-end API Introduction: In web application development, data interaction between the front-end and the back-end is a very important link. As a popular front-end framework, Vue3 has many ways to interact with back-end APIs. This article will introduce how to use the Vue3+TypeScript+Vite development environment to interact with the back-end API, and deepen understanding through code examples. 1. Use Axios to send requests. Axios is
How does uniapp implementation use JSBridge to interact with native
Oct 20, 2023 am 08:44 AM
How uniapp implements using JSBridge to interact with native requires specific code examples 1. Background introduction In mobile application development, sometimes it is necessary to interact with the native environment, such as calling some native functions or obtaining some native data. As a cross-platform mobile application development framework, uniapp provides a convenient way to interact with native devices, using JSBridge to communicate. JSBridge is a technical solution for the front-end to interact with the mobile native end.
How to use the enterprise WeChat interface to interact with PHP for data
Jul 05, 2023 am 09:00 AM
How to use the Enterprise WeChat interface to interact with PHP for data. Enterprise WeChat is an important platform for internal communication and collaboration within the enterprise. Developers can realize data interaction with Enterprise WeChat through the Enterprise WeChat interface. This article will introduce how to use PHP language to call the enterprise WeChat interface to realize data transmission and processing. First, you need to create an enterprise WeChat application and obtain the corresponding CorpID, Secret and AgentID. This information can be found in the "Applications and Mini Programs" in the Enterprise WeChat management backend. Next, I
Methods and FAQs for interacting with PHP and JavaScript
Jun 08, 2023 am 11:33 AM
PHP and JavaScript interaction methods and FAQs With the rapid development of the Internet, web pages have become the main platform for people to obtain information and communicate. PHP and JavaScript are the two most commonly used languages for developing web pages. They all have their own advantages and applicable scenarios, and in the development process of large websites, the combination of the two will expand the work capabilities of developers. This article will introduce the methods of interaction between PHP and JavaScript and answers to common questions. PHP and JavaScript
The development history and trend prospects of front-end and back-end development
Mar 26, 2024 am 08:03 AM
With the rapid development of the Internet and the rapid changes in information technology, front-end and back-end development, as two important IT fields, have also made great progress in the past few decades. This article will explore the development history of front-end and back-end development, analyze current development trends, and look forward to future development directions. 1. The development history of front-end and back-end development In the early stages of the Internet, website development mainly focused on the presentation of content, and front-end development work mainly focused on technologies such as HTML, CSS, and JavaScript to achieve the basic functionality of the page.
Front-end and back-end responsibilities and skill requirements
Mar 25, 2024 pm 07:00 PM
Front-end and back-end are two indispensable parts of software development, and they respectively bear different responsibilities and skill requirements. This article will explore the job content and requirements of front-end and back-end development engineers in terms of responsibilities and skills. 1. Responsibilities and skill requirements of front-end engineers Front-end engineers are responsible for implementing user interface and interactive functions and facing users directly. They need to have the following responsibilities and skill requirements: implement the user interface design of the website or application to ensure good page visual effects and interactive experience; Work closely with UI/UX designers to transform design drafts into
How to use Swoole to implement WebSocket server and client interaction
Nov 07, 2023 pm 02:15 PM
WebSocket has become a commonly used real-time communication protocol in modern web applications. Developing WebSocket servers using PHP generally requires the use of extensions such as Swoole, because it provides support for asynchronous programming, process management, memory mapping, and other WebSocket-related features. In this article, we will discuss how to use Swoole to implement WebSocket server-client interaction and provide some specific code examples. Swoole and W
