Configure cross domain requests

What is cross-domain

agreement , domain name 、 The same port is the same domain , Otherwise, it's all cross domain ,

The idea of configuration

• establish vue.congif.js file , Inside devServer It is used to configure the server of the development environment , There are proxy It is used to forward the proxy , stay proxy Inside target Set the forwarding URL

Cross domain forwarding

Because of cross domain problems ,axios Can't request URL data , But browsers can , So the application proxy forwards the request data to the web address we set , and axios Request URL , It is equivalent to a middleman acting as an agent

Code display

module.exports = {
    
    devServer: {
      // Server configuration of development environment 
        //  Whether to automatically pop up the browser , Default false
        open: false,
        //  Modify the default port , Default 8080
        port: 9090,
 
        proxy: {
      // Forwarding by proxy 
            '/api': {
    
                //  Forwarded URL 
                target: "http://m.sirfang.com/api",
                //  Whether to start the local agent   Default true
                changeOrigin: true,
                //  Important points 
                pathRewrite: {
    
                    '^/api': ''
                }
            }
        }
 
    }
}

encapsulation api Changes after request

Need to change request Public URL settings in the request

const server = axios.create({
    
    baseURL: '/api',
    timeout: 6000
})

matters needing attention

• The file name cannot be changed
• You need to restart the project after configuration

Package project configuration

Purpose

• Improve packaging speed
• Reduce project volume , Increase the loading speed of the first screen
• Improve user experience

Extraction of common code

//  Common code pull away 
configureWebpack: config => {
    
//....
// Optimize item configuration 
config.optimization = {
    
    splitChunks: {
     //  Split code blocks 
        cacheGroups: {
    
            vendor: {
    // The third-party library is pulled away 
                chunks: 'all',
                test: /node_modules/,
                name: 'vendor',
                minChunks: 1,// Before the split , The minimum number of times this code block should be referenced 
                maxInitialRequests: 5,
                minSize: 0,// Greater than 0 Bytes 
                priority: 100// The weight 
            },
            common: {
      // Common module extraction 
                chunks: 'all',
                test: /[\\/]src[\\/]js[\\/]/,
                name: 'common',
                minChunks: 2, //  Before the split , The minimum number of times this code block should be referenced 
                maxInitialRequests: 5,
                minSize: 0,// Greater than 0 Bytes 
                priority: 60
            },
            styles: {
     // The pattern pulls away 
                name: 'styles',
                test: /\.(sa|sc|c)ss$/,
                chunks: 'all',
                enforce: true
            },
            runtimeChunk: {
    
                name: 'manifest'
            }
        }
    }
  }
}