Shulou(Shulou.com)06/01 Report--

This article mainly introduces the "local Vue project request local Node.js server how to configure" related knowledge, editor through the actual case to show you the operation process, the operation method is simple and fast, practical, hope that this "local Vue project request local Node.js server how to configure" article can help you solve the problem.

1. Use vue-cli scaffolding to build vue project.

1. Run cmd on the desktop, create a vue project demo with the command vue create demo, use the default configuration for plug-in dependencies, etc.

2. After the project is created successfully, use the command cd demo, enter the demo folder, and then use the command npm run serve to start the project. The port defaults to 8080.

3. Visit http://localhost:8080/ in the browser and you can see the Vue project running locally.

2. Use koa to build node backend

1. Run cmd on the desktop, type mkdir koademo to create a koademo folder, enter cd koademo to enter the folder, and then run npm init to initialize

2. Open the koademo folder and run

Npm i koanpm i @ koa/router

Dependencies required for installation

3. Create a new index.js file

Const Koa = require ('koa'); const app = new Koa (); const Router = require (' @ koa/router') const router = new Router () router.get ('/', ctx = > {ctx.body = `This is the homepage `}) router.get ('/ person', ctx = > {ctx.body = {id: 1, name: 'Alica'}}) app .use (router.routes ()) .use (router.allowedMethods ()) app.listen (3001)

4. Run node index.js to access the interface data in http://localhost:3001/person

3. Add a backend request to the Vue project

1. Use the command npm install axios to install axios for the Vue project to make asynchronous requests, and then introduce it into main.js and bind it to the prototype of Vue:

2. Add the hook function of the lifecycle mounted to the HelloWorld.vue file of the Vue project, and initiate the get request with axios. The request interface is api/person.

3. Create a new vue.config.js under the root directory of the Vue project, as follows:

Module.exports = {devServer: {proxy: {'/ api': {target: 'http://localhost:3001', / / node.js server running address ws: true, changeOrigin: true PathRewrite: {'^ / api': 'http://localhost:3001' / / path rewriting}},}}

4. Restart the Vue project, open the console, and you can see the requested data:

This is the end of the content about "the local Vue project requests how to configure the local Node.js server". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.