Vue-cli中fig.js的配置详解
1. Vue-cli2 升级到 Vue-cli3+
nginx部署前端项目1.1 卸载旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.> x)，需要先卸载它。
npm uninstall vue-cli -g
// 或
yarn global remove vue-cli
1.2 node 配置
Vue CLI3+ 需要 Node.js 8.9 或更⾼版本 (推荐 8.11.0+)
1.3 全局安装包
npm install -g @vue/cli
// 或
yarn global add @vue/cli
1.4 创建⼀个项⽬
vue create vue-web
安装所需选择配置：
3. Vue-cli3 / Vue-cli4 配置语法
3.1 ⽬录结构
├── README.md      # 说明
|-- dist                        # 打包后⽂件夹
├── fig.js    # babel语法编译
├── package-lock.json
├── public      # 静态⽂件夹，这类资源将会直接被拷贝，⽽不会经过 webpack 的处理。
│├── favicon.ico
│└── index.html    #⼊⼝页⾯
└── src          # 源码⽬录
├── App.vue -页⾯
├── assets  -静态⽬录，这类引⽤会被 webpack 处理。
│└── logo.png
├── components 组件
│└── HelloWorld.vue
└── main.js                  # ⼊⼝⽂件，加载公共组件
│—— fig.js                # 配置⽂件，需⾃⾏配置
│—— .gitignore            # git忽略上传的⽂件格式
│—— fig.js      # babel语法编译
│—— package.json                # 项⽬基本信息
│—— .env                        # 环境变量和模式，需⾃⾏配置
│—— .eslintrc.js          # ES-lint校验
3.fig.js 配置
Vue-cli3+ 和 Vue-cli2 的最⼤区别：在于内置了很多配置，没有 build ⽂件夹和 config 的配置。但是在开发中，避免不了的还是需要个性化的配置，这⾥系统讲⼀下 fig.js 的配置。
3.2.1 基础版
publicPath:'./',// 基本路径
outputDir:'dist',// 构建时的输出⽬录
assetsDir:'static',// 放置静态资源的⽬录
indexPath:'index.html',// html 的输出路径
filenameHashing:true,// ⽂件名哈希值
lintOnSave:false,// 是否在保存的时候使⽤ `eslint-loader` 进⾏检查。
// 组件是如何被渲染到页⾯中的？（ast：抽象语法树；vDom：虚拟DOM）
// template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页⾯
// runtime-only：将template在打包的时候，就已经编译为render函数
// runtime-compiler：在运⾏的时候才去编译template
runtimeCompiler:false,
transpileDependencies:[],// babel-loader 默认会跳过 node_modules 依赖。
productionSourceMap:false,// 是否为⽣产环境构建⽣成 source map
/
/调整内部的 webpack 配置
configureWebpack:()=>{},
chainWebpack:()=>{},
// 配置 webpack-dev-server ⾏为。
devServer:{
open:true,// 编译后默认打开浏览器
host:'0.0.0.0',// 域名
port:8080,// 端⼝
https:false,// 是否https
// 显⽰警告和错误
overlay:{
warnings:false,
errors:true
},
proxy:{
'/api':{
target:'127.0.0.1:10001',
changeOrigin:true,// 是否跨域
ws:false,// 是否⽀持 websocket
secure:false,// 如果是 https 接⼝，需要配置这个参数
pathRewrite:{// 可以理解为⼀个重定向或者重新赋值的功能
'^/api':''// '^/api': '/'    这种接⼝配置出来    127.0.0.1:10001/login
}// '^/api': '/api'  这种接⼝配置出来    127.0.0.1:10001/api/login
}
}
}
}
3.2.2 ⾼级版及部分Webpack插件介绍
// fig.js
const path =require('path');
const resolve=(dir)=> path.join(__dirname, dir);
const CompressionWebpackPlugin =require("compression-webpack-plugin");// 开启gzip压缩(可选)
const productionGzipExtensions =/\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;// 开启gzip压缩(可选)
const BundleAnalyzerPlugin =require("webpack-bundle-analyzer").BundleAnalyzerPlugin;// 打包分析，(可选) const IS_PRODUCTION=['production','prod'].v.NODE_ENV);//判断是否是⽣产环境
/** 正式配置项，以下参数都是可选**/
publicPath: v.NODE_ENV==='production'?'/site/vue-demo/':'/',// 打包公共路径
indexPath:'index.html',// 相对于打包路径index.html的路径
outputDir: v.outputDir ||'dist',// 'dist', ⽣产环境构建⽂件的⽬录
assetsDir:'static',// 相对于outputDir的静态资源(js、css、img、fonts)⽬录
lintOnSave:false,// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码，false不需要
runtimeCompiler:true,// 是否使⽤包含运⾏时编译器的 Vue 构建版本
productionSourceMap:!IS_PRODUCTION,// ⽣产环境的 source map,
// 是否为 Babel 或 TypeScript 使⽤ thread-loader。该选项在系统的 CPU 有多于⼀个内核时⾃动启⽤，仅作⽤于⽣产构建。  parallel:require("os").cpus().length >1,
pwa:{},// 向 PWA 插件传递选项。
chainWebpack: config =>{
// 如果使⽤多页⾯打包，使⽤vue inspect --plugins查看html是否在结果数组中
config.plugin("html").tap(args =>{
// 修复 Lazy loading routes Error
args[0].chunksSortMode ="none";
return args;
});
.set('@',resolve('src'))
.set('@assets',resolve('src/assets'))
.set('@components',resolve('src/components'))
.set('@views',resolve('src/views'))
.set('@store',resolve('src/store'));
// 压缩图⽚
// 需要 npm i -D image-webpack-loader
.rule("images")
.use("image-webpack-loader")
.loader("image-webpack-loader")
.
options({
mozjpeg:{
progressive:true,
quality:65
},
optipng:{
enabled:false
},
pngquant:{
quality:[0.65,0.9],
speed:4
},
gifsicle:{
interlaced:false
},
webp:{
quality:75
}
});
// 打包分析, 打包之后⾃动⽣成⼀个名叫report.html⽂件(可忽视)
if(IS_PRODUCTION){
config.plugin("webpack-report").use(BundleAnalyzerPlugin,[{
analyzerMode:"static"
}]);
}
},
//webpack的配置项
configureWebpack: config =>{
// 开启 gzip 压缩
// 需要 npm i -D compression-webpack-plugin
const plugins =[];
if(IS_PRODUCTION){
plugins.push(
new CompressionWebpackPlugin({
filename:"[path].gz[query]",
algorithm:"gzip",
test: productionGzipExtensions,
threshold:10240,
minRatio:0.8
})
);
}
config.plugins =[...config.plugins,...plugins];
},
css:{
extract:IS_PRODUCTION,
requireModuleExtension:false,// 去掉⽂件名中的 .module
loaderOptions:{
// 给 less-loader 传递 Less.js 相关选项
less:{
// `globalVars` 定义全局对象，可加⼊全局变量
globalVars:{
primary:'#333'
}
}
}
},
// 配置 webpack-dev-server ⾏为
devServer:{
overlay:{// 让浏览器 overlay 同时显⽰警告和错误
warnings:true,
errors:true
},
host:"localhost",
port:8080,// 端⼝号
https:false,// https:{type:Boolean}
open:false,// 编译后默认打开浏览器
hotOnly:true,// 热更新
// proxy: 'localhost:8080'  // 配置跨域处理，只有⼀个代理
proxy:{//配置多个跨域
"/api":{
target:"197.0.0.1:8088",
changeOrigin:true,
ws:true,//websocket⽀持
secure:false,
pathRewrite:{
"^/api":"/"
}
},
"/api2":{
target:"197.0.0.2:8088",
changeOrigin:true,
//ws: true,//websocket⽀持
secure:false,
pathRewrite:{
"^/api2":"/"
}
},
}
}
}
以上配置按需引⽤，常见的配置项都已经写出，其他特殊可参考
3.2.3 部分Webpack插件介绍
添加别名 (alias)
在 Vue 项⽬开发中，经常需要引⼊不同⽂件⽬录的组件，通常是通过 “ import 组件名 from ‘ 组件路径 ’ ” 的结构来实现对组件的引⽤，⽽当⽂件路径较深或者引⽤的组件跨越的较远时很容易引⽤出错，这⾥我们就要引⼊alias概念了，“别名”的意思，顾名思义标准名称以外的名称。
const path =require("path");
const resolve= dir => path.join(__dirname, dir);
chainWebpack: config =>{
.set("vue$","vue/dist/vue.esm.js")
.set("@",resolve("src"))
.set("@assets",resolve("src/assets"))
.set("@components",resolve("src/components"))
.set("@views",resolve("src/views"))
.set("@router",resolve("src/router"))
.set("@store",resolve("src/store"));
}
};
使⽤ splitChunks 单独打包第三⽅模块
开启 GZIP 压缩
GZIP 是⽹站压缩加速的⼀种技术，对于开启后可以加快我们⽹站的打开速度。经过服务器压缩，客户端浏览器快速解压，可以⼤⼤减少⽹站的流量。
⽐如： nginx 给你返回 js ⽂件的时候，会判断是否开启 gzip，然后压缩后再还给浏览器。
但是 nginx 其实会先判断是否有 .gz 后缀的相同⽂件，有的话直接返回，nginx 不再进⾏压缩处理。⽽压缩是要时间的，不同级别的压缩率花的时间也不⼀样。所以提前准备 gz ⽂件，可以更加优化，⽽且你可以把压缩率提⾼点，这样带宽消耗会更⼩。
安装
npm install --save-dev compression-webpack-plugin
// 或
yarn add compression-webpack-plugin --save-dev
const CompressionWebpackPlugin =require("compression-webpack-plugin");// 开启gzip压缩，按需引⽤
const productionGzipExtensions =['js','css'];// 开启gzip压缩，按需写⼊
// 调整内部的 webpack 配置
configureWebpack: config =>{
const plugins =[];
plugins.push(new CompressionWebpackPlugin({
filename:"[path].gz[query]",// 压缩后的⽂件策略
algorithm:"gzip",// 压缩⽅式
test:new RegExp('\\.('+ productionGzipExtensions.join('|')+')$'),// 可设置需要压缩的⽂件类型
threshold:10240,// ⼤于10240字节的⽂件启⽤压缩
minRatio:0.8,// 压缩⽐率⼤于等于0.8时不进⾏压缩
deleteOriginalAssets:false,// 是否删除压缩前的⽂件，默认false
}));
config.plugins =[...config.plugins,...plugins];
},
如果报错：TypeError: Cannot read property 'tapPromise'of undefined，可降低 compression-webpack-plugin 的版本；
默认安装的是7以上的版本，package.json 调整为"compression-webpack-plugin":"^5.0.0"，就可以啦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。