vue-cli4 vue.config.js 配置 懒加载图片 gzip 压缩

vue-Cli4 vue.config.js 配置

项目不同，配置文件也不同，请参考

1、图片资源懒加载

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：

• 安装插件
  • npm install vue-lazyload --save-dev
• 在入口文件main.js中引入并使用
  • import VueLazyload from ‘vue-lazyload’
  • 然后在vue中直接使用
  • Vue.use(VueLazyload)
  • 或者添加自定义选项

  * Vue.use(VueLayzload,{
  		preLoad:1.3,
  		error:'dist/error.png',
  		loading:'dist/loading.gif',
  		attempt:1
    })
  

在vue文件中将img标签src属性直接改为 v-layz,从而将图片显示方式更改为懒加载显示
图片显示方式更改为懒加载显示：

 <img v-lazy="/static/img/1.png>

2、gzip 压缩

npm i -D compression-webpack-plugin

configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.html$|\.css/, // 匹配的文件名
        threshold: 10240, // 文件超过10k，进行gzip压缩
        minRatio: 0.8，
        deleteOriginalAssets: false // 是否删除原文件
      })
    ]
  }

3、压缩图片

npm i -D image-webpack-loader

在某些版本的 OSX 上安装可能会因缺少 libpng 依赖项而引发错误。可以通过安装最新版本的 libpng 来解决。

npm install libpng

4、配置别名

引入path

const path = require("path");
module.exports = {
	configureWebpack:{
		resolve:{
			alias: {
                "@": path.join(__dirname, "./src"),
                "@api": path.join(__dirname, "./src/api"),
                "@assets": path.join(__dirname, "./src/assets"),
                "@views": path.join(__dirname, "./src/views"),
                "@components": path.join(__dirname, "./src/components"),
                "@router": path.join(__dirname, "./src/router"),
                "@store": path.join(__dirname, "./src/store"),
                "@utils": path.join(__dirname, "./src/utils"),
            }
		}
	},
	//打包后导致文件路径错误，改为./
    publicPath:'./',
    //打包生成文件名称
    outputDir:'文件名称',
    //是否在保存的时候 使用 eslint-loader 进行检查
    lintOnSave:true,
    devServer: { //解决vue本地跨域代理
        port: 8001,
        proxy: {
            "/api": {
                target: "http://192.168.1.202:8901",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        },
    },
    在multi-page 模式下构建应用，每个"page"应该有一个对应的javascript入口文件，其值应该是一个对象，对象key是入口的名称
    pages: {
	    index: {
	      // page 的入口
	      entry: 'src/index/main.js',
	      // 模板来源
	      template: 'public/index.html',
	      // 在 dist/index.html 的输出
	      filename: 'index.html',
	      // 当使用 title 选项时，
	      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
	      title: 'Index Page',
	      // 在这个页面中包含的块，默认情况下会包含
	      // 提取出来的通用 chunk 和 vendor chunk。
	      chunks: ['chunk-vendors', 'chunk-common', 'index']
	    },
	    // 当使用只有入口的字符串格式时，
	    // 模板会被推导为 `public/subpage.html`
	    // 并且如果找不到的话，就回退到 `public/index.html`。
	    // 输出文件名会被推导为 `subpage.html`。
    	subpage: 'src/subpage/main.js'
  	}
}