webpack summary

1. It's hard to avoid cross domain problems in front and back platform separation projects, which can be configured in devServer of webpack

devServer:{
    proxy:{
       "/api":{
             target:"https://****. com "/ / address of data interface 
             changeOrigin:true,  // Cross domain allowed 
             secure:false, // Allow to run on https   
             pathRewrite: { //If you don't want to always pass / api, you can override the path
                  '^/api': ''
             }   
        }
         
    }
}

2. Configure the interface address of development environment and production environment

//Find the config/dev.env.js and prod.env.js files in Vue cli

//dev.env.js is configured as follows

    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      API_ROOT:'"//192.168.100.222:8080/api"'
    })

//prod.env.js is configured as follows

    module.exports = {
      NODE_ENV: '"production"',
      API_ROOT:'"https://***. com / "'/ / online interface address
    }

3.axios configuration

After you configure the following code, you can use axios to pull data directly from components,

const url= process.env.API_ROOT;//Match automatically according to the running environment
//When axios submits data, if qs package is used,
// Serialize {user:'zhangsan',psw:123} into user = Zhangsan &; PSW = 123} using qs.stringify() to serialize the code
axios.post(`${url}/xxx/xxx`,qs.stringify(data))
.then((res)=>{})

4. Font path error in iview css after package transfer

We found that the font path introduced in the packed css file is not correct, and there is an extra layer of / css. We just need to rewrite the configuration in build/webpack.prod.conf.js

   module: {
        rules: utils.styleLoaders({
          sourceMap: config.build.productionSourceMap,
          extract: false,// Rewrite from true to false
          usePostCSS: true
        })
   }

5. When we import files, if the path is too long, we can use aliases

resolve:{
    alias:{
       '@':resolve('src'),
       'common':resolve('src/common'),
       'components':resolve('src/components')
    }
}

Vue router summary

1. How to monitor Vue router

Method 1. watch

watch:{
    $route(to,from){// to destination route, jump from that route
        console.log(to,from)
    }
}

//Deep monitoring

watch:{
    $route:{
        handler:function(newVal,oldVal){
            console.log(newVal,oldVal);
        },
        deep:true//Deep monitoring
    }
}

// Match methods event

watch:{
    '$route':'getChange'
},
methods:{
    getChange(){
        console.log(this.$route.path)
    }
}

Method 2 route guard in component

beforeRouteEnter(to,from,next){
    //!! Cannot get component instance this because the component has not been created when the hook is executing
    //But you can use the callback to get it
    next(vm=>{
        
    })
},
beforeRouteUpdata(to,from,next){
   // Route change, when the component is reused, use / foo:id
   // Access to this
},
beforeRouteLeave(to,from,next){
    //The corresponding route call when the navigation leaves the component
    // Access to this
}

To be continued