This is the 27th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

In our use of VUE development will find a variety of bugs, today to record my redevelopment of the time some bugs, some pits.

1. The page is blank after vue is packaged

In config folder index.js, find assetsPublicPath: '/' and change it to assetsPublicPath: './'Copy the code

2. When the project is packaged, it will be found that there are many very large files in the packaged files.mapHow do we do that so that we don’t generate these files when the project is packaged

It can be found in config/index.js

ProductionSourceMap: true, // change to falseCopy the code

3. During development, we will use a lot of console debugging, and we don’t want to comment it out one by one, so we can add the following code to the webpack.prod.conf.js file in the build folder when packaging

New UglifyJsPlugin({uglifyOptions: {compress: {warnings: false, // filter console.log-start drop_console: True, pure_funcs: ['. The console log '] / / filter the console log - end}}, sourceMap: config. Build. ProductionSourceMap, parallel: true }),Copy the code

4. When Vue was packaged, the elementUI icon became a solution that the small box couldn’t show

Locate the utils.js file in vue's build folder and add publicPath at the following location: '.. /.. /' function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if  (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '.. /.. } else {return ['vue-style-loader']. Concat (loaders)}}Copy the code

5. Vue jumps to external links

This method adds the original path address to the URL before the jump

let routeUrl = this.row.html
 window.open(routeUrl, '_blank');
Copy the code

This can only jump to the original page. It won’t open a new window

window.location.href=routeUrl
Copy the code

6, vue eliminates the url above#symbol

Add mode:’history’ to router index.js

Export default new Router({mode:'history',// add routes: [{path: '/cxyz', name: 'cxyz', Component: cxyz, meta:{requireAuth:true} }, ] })Copy the code

7, use,window.onresizeTo monitor the width and height of the screen

Will only run once, multiple pages will cause failure, so it depends

mounted() { var that = this; Window. The onresize = function () {/ / definition window size change notification event that screenWidth = document. The documentElement. ClientWidth; / / window width that. ScreenHeight = document. DocumentElement. ClientHeight; // Window height}; }Copy the code

Eight, the use ofwindow.addEventListenerTo do listening

HandleScroll () {let scroll = this.$refs.chatlists. ScrollTop; console.log(scroll); },Copy the code
mounted(){
    window.addEventListener('scroll', this.handleScroll,true)
},
Copy the code

The best thing to do is to add and remove this listener, but sometimes it gives an error, I don’t know why; So it depends whether we add it or not; You’d better not mount too many, or you’ll have an accident