vue3.0 configure proxy proxy solve cross-domain problems

vue3.0 proxy proxy configuration is mainly to solve the interface problem and routing problem.

Here that is vue3.0 version:

1. First add vue.config.js file in the root directory of the project.

2. Then  vue.config.js reads as follows:

  module.exports = {
     // base path  
     publicPath: './',
     // output path   
     outputDir: 'dist',
     // static resources    
     assetsDir: './',
     // eslint-loader check whether the time saved  
     lintOnSave: true,
     // item configuration services    
     devServer: {
         host: 'localhost',
         port: 8080,
         https: false,
         open: true,
   // set the proxy proxy
         proxy: {
            '/api':{
                'target':‘http://localhost:3000',
                changeOrigin: true, // indicates whether a cross-domain,
                pathRewrite: {// expressed the need to rewrite rewrite
                    '^/api':'  ',
                }
            }
         }   
     }
 }
3. Finally, when requested:
  譬如:"http://localhost:3000/login"
  Now written: "/ api / login".
  With / api replace the original http: // localhost: 3000
 

Guess you like

Origin www.cnblogs.com/whx123/p/12133363.html