一. 配置选项
publicPath
- Type(类型): string
- Default(默认): ‘/’
- 作用：项目部署的基础路径
- 场景应用：（假设域名：
https://www.vueconfig.com）
1.'/'：默认部署在域名的根部。即：https://www.vueconfig.com/
2./childrenpath/：认为部署在https://www.vueconfig.com/childrenpath/的子路径下
3.'./'：相对路径（打包后部署到服务器中，从index.html开始计算的相对路径）
4.process.env.NODE_ENV === 'production' ? '/生产环境路径/' : ' ':不同开发环境的切换模式。
5.NODE_ENV：Node.js 暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境。
outputDir
- Type(类型): string
- Default(默认): ‘dist’
- 作用：输出文件目录
- 场景应用：
1.'dist'：默认打包的文件夹名称。
2.'自定义文件名'：根据需求，自定义文件夹名称。
assetsDir
- Type(类型): string
- Default(默认): ‘’
- 作用：放置生成的静态资源 (js、css、img、fonts) 的目录。
- 场景应用：
1.''：静态资源 (js、css、img、fonts) 这四个文件夹在'dist'文件夹下
2.'自定义文件名'：静态资源在'自定义文件名'下，'自定义文件名'在'dist'文件夹下。即：dist-自定义文件名-(js、css、img、fonts)四个文件夹
indexPath
- Type(类型): string
- Default(默认): ‘index.html’
- 作用：用于设定打包生成的 index.html 文件的存储位置。
- 场景应用：
1.‘index.html’：一般用这个默认值，不改变
filenameHashing
- Type(类型): boolean
- Default(默认): true
- 作用：设置打包生成的的静态资源的文件名中是否加入hash以便控制浏览器缓存问题。
- 场景应用：
1.true：一般用这个默认值，不改变。
2.浏览器缓存：浏览器加载静态文件机制：当浏览器去加载一个页面的静态文件时，浏览器会先去缓存查找当前域名是否已存在这个文件。如果存在，则直接读取缓存里的文件，而不再向服务器请求该资源。浏览器这样的设定减少了请求资源的占用，同时也加快页面的加载速度。但是，因为这个缓存问题，开发人员就会遇到这样一个问题：当我们开发人员对某个静态文件（如：css、js）修改后，再到浏览器一跑，发现修改并没有起效。
3.解决浏览器缓存：要解决这个问题，我们就要保证每次改动后生成的文件不能与浏览器缓存中的文件名一致就可以了。因此，常用的方法就是给文件名添加一段随机数（hash就是随机数的一种）
lintOnSave
- Type(类型): boolean | ‘warning’ | ‘default’ | ‘error’
- Default(默认): ‘default’
- 作用：设置是否在开发环境下每次保存代码时都启用 eslint验证。
- 场景应用：
1.false：关闭 elsint 检测
2.true：开启每次保存都进行检测，效果与warning一样。（一般选择true）
3.'warning'：开启每次保存都进行检测，lint 报错信息将显示到控制台命令行，编译并不会失败。
4.'default'：开启每次保存都进行检测，lint 报错信息将显示到浏览器页面上，且编译失败。
5.'error'：开启每次保存都进行检测，lint 报错信息以及警告信息将显示到浏览器页面上，且编译失败。
runtimeCompiler
- Type(类型): boolean
- Default(默认): false
- 作用：是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
- 场景应用：
1.false：一般用这个默认值，不改变。
transpileDependencies
- Type(类型): Array<string | RegExp>
- Default(默认): []
- 作用：默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
- 场景应用：
1.[]：一般用这个默认值，不改变。
productionSourceMap
- Type(类型): boolean
- Default(默认): true
- 作用：设置生产环境的 source map 开启与关闭。
- 场景应用：
1.true：开启source map 。
2.false：关闭source map 。一般生产环境不需要source map，可以关闭，加速生产环境构建。
3.什么是 source map?：source map 直译过来就是资源地图。所以，source map的作用就是定位。source map定位的时浏览器控制台输出语句在项目文件的位置。
4.第一张图是没有source map，第二张图是有source map。第三张图是开启source map多的文件。只有 js 才有 .map 文件。
crossorigin
- Type(类型): string
- Default(默认): undefined
- 作用：设置生成的 HTML 中< link rel=“stylesheet”> 和 < script> 标签的 crossorigin 属性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 – 直接写在模版 (public/index.html) 中的标签不受影响。
- 场景应用：
1.undefined：一般用这个默认值，不改变。
integrity
- Type(类型): boolean
- Default(默认): false
- 作用：在生成的 HTML 中的 < link rel=“stylesheet”> 和 < script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 – 直接写在模版 (public/index.html) 中的标签不受影响。另外，当启用 SRI 时，preload resource hints 会被禁用，因为 Chrome 的一个 bug 会导致文件被下载两次。
- 场景应用：
1.false：一般用这个默认值，不改变。
Webpack相关配置
configureWebpack
- Type(类型): object | Function
- 官方文档说明:
如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。- 作用：借助 configureWebpack我们可以实现随webpack配置的新增与修改.（跟chainWebpack作用相同，只是实现修改webpack方式不一样）
- 场景应用：
/* 引入打包分析插件 */
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
/* 引入压缩插件 但是导致项目启动的比较慢*/
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack')/* 不知道需不需要引入这个*/
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
configureWebpack: (config) => {
// 为生产环境修改配置...
if (process.env.NODE_ENV === 'production') {
// 打包可视化分析
config.plugins.push(new BundleAnalyzerPlugin());
/* js 压缩 */
config.plugins.push(new UglifyJsPlugin({
uglifyOptions: {
uglifyOptions: {
compress: {
drop_debugger: true,
drop_console: true, // 生产环境自动删除console
pure_funcs: ['console.log'] //移除console---后加入的
},
warnings: false
},
sourceMap: false,
parallel: true // 使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
}
}))
} else {
// 为开发环境修改配置...
}
// 开发生产共同配置别名
Object.assign(config.resolve, {
alias: {
'@': path.resolve(__dirname, './src'),
'assets': path.resolve(__dirname, './src/assets'),
'common': path.resolve(__dirname, './src/common'),
'components': path.resolve(__dirname, './src/components'),
'network': path.resolve(__dirname, './src/network'),
'configs': path.resolve(__dirname, './src/configs'),
'views': path.resolve(__dirname, './src/views'),
'plugins': path.resolve(__dirname, './src/plugins'),
}
})
},
chainWebpack
- Type(类型): Function
- 作用：Webpack配置另一种写法—— webpack-chain（链式操作）
- 场景应用：
chainWebpack: config => {
// 配置别名
config.resolve.alias
.set('@', resolve('src'))//设置@快捷到src目录
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
.set('layout', resolve('src/layout'))
.set('base', resolve('src/base'))
.set('static', resolve('src/static'));
// 删除预加载
config.plugins.delete('preload')
config.plugins.delete('prefetch')
// 压缩代码
config.optimization.minimize(true)
// 分割代码
config.optimization.splitChunks({
chunks: 'all'
})
// 压缩图片
config.module
.rule('images')
/* 需要下载这个图片压缩loader npm install --save-dev image-webpack-loader */
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
mozjpeg: { progressive: true, quality: 65 },
optipng: { enabled: false },
pngquant: { quality: [0.8,0.9], speed: 4 },
gifsicle: { interlaced: false },
webp: { quality: 75 },
});
},
Css相关配置
css.requireModuleExtension
- Type(类型): boolean
- Default(默认): true
- 作用：
1.用于设定，是否只有*.module.[ext]结尾的文件才会被视作CSS Modules 模块。
2.默认情况下，只有文件名中含有.modules的CSS相关文件还能使用CSS Modules。- 注意：
1.如果我们进行了关于css.loaderOptions.css的配置。一定要在配置文件中显性的指出css.requireModuleExtension的值。也就是说，我们一定要配置css.requireModuleExtension。
2.原来vue.config.js中配置的css.modules过时了，改为css.requireModuleExtension
module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist' // 输出文件目录
// css相关配置
css: {
extract: false, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: true, // 开启 CSS source maps?
// 因为配置了loaderOptions.css, 尽管requireModuleExtension的值为默认值，我们也需要指出
requireModuleExtension: true,
loaderOptions: {
css: {
// 注意：以下配置在 Vue CLI v4 与 v3 之间存在差异。
// Vue CLI v3 用户可参考 css-loader v1 文档
// https://github.com/webpack-contrib/css-loader/tree/v1.0.1
modules: {
localIdentName: '[local]_[hash:base64:8]'
}
}
}
}
}
css.loaderOptions
- Type(类型): Object
- Default(默认): {}
- 作用：用于向 CSS 相关的 loader 传递选项（设置）
- 相关的loader：
1.css-loader
2.postcss-loader
3.sass-loader
4.less-loader
5.stylus-loader
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 这里的选项会传递给 css-loader
css: {
// 配置 CSS Modules 的class命名规则
modules: {
localIdentName: '[local]_[hash:base64:8]'
}
},
// 这里的选项会传递给 postcss-loader
postcss: {
},
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.sass` 这个文件
// 注意：在 sass-loader v7 中，这个选项名是 "data"
prependData: `@import "~@/variables.sass"`
},
// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
// 因为 `scss` 语法在内部也是由 sass-loader 处理的
// 但是在配置 `data` 选项的时候
// `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
// 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
scss: {
prependData: `@import "~@/variables.scss";`
},
// 给 less-loader 传递 Less.js 相关选项
less:{
// http://lesscss.org/usage/#less-options-strict-units `Global Variables`
// `primary` is global variables fields name
globalVars: {
primary: '#fff'
}
}
}
}
}
css.extract
- Type(类型): boolean | Object
- Default(默认): 生产环境下是 true，开发环境下是 false
- 作用：用于控制是否强制分离vue 组件内的css。
- 开启和关闭区别：
关闭：打包后的dist文件夹中，没有css文件夹。组件样式以内部样式表的形式加载的。
开启：打包后的dist文件夹中，有css文件夹。开启后通过link引入css文件
module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist' // 输出文件目录
// css相关配置
css: {
extract: false // 是否使用css分离插件 ExtractTextPlugin
}
}
css.sourceMap
- Type(类型): boolean
- Default(默认): false
- 作用：设置是否开启 css 的 sourse map功能。css 的 sourse map作用类似与 js 的 sourse map。
- 注意：
1.开启可能会影响构建性能。
2.在使用css.sourceMap时，我们最好关闭css.extract。
module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist' // 输出文件目录
// css相关配置
css: {
extract: false, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: true // 开启 CSS source maps?
}
}
代理相关配置
devServer
- Type(类型): Object
- Default(默认): false
- 作用：通过devServer，可以在NodeJs架设起临时的服务器用于项目的运行与调试。
devServer: {
inline: true, // 用于设置代码保存时是否自动刷新页面。默认：true
host: '10.32.120.69', // ip 本地
port: 2021, // 设置端口号
open: false, //配置自动启动浏览器，默认：false
openPage: '/different/page', // 指定deserver 编译完成后自动打开的页面.需要配合 open：true 来使用。如果Vue router 为 hash mode。应在url前面补上/#。如：openPage: '/#/about'
headers:{ // 在所有响应中添加首部内容
'X-Custom-Foo': 'bar'
},
hot: true, // 用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）。默认：true
hotOnly: false, // hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败.
disableHostCheck: true, //可以被外网访问
https: false, // 用于设置是否启用https，默认：false
proxy: null, //设置代理
// proxy: { //目的是解决跨域，若测试环境不需要跨域，则不需要进行该配置
// '/api': { // 拦截以 /api 开头的url接口
// target: 'https://api.taobao.cn/', //目标接口域名
// changeOrigin: true, //是否跨域
// ws: true, //如果要代理 websockets，配置这个参数
// secure: false, // 如果是https接口，需要配置这个参数
// // 标识替换
// // 原请求地址为 /api/getData 将'/api'替换''时，
// // 代理后的请求地址为： http://xxx.xxx.xxx/getData
// // 若替换为'/other',则代理后的请求地址为 http://xxx.xxx.xxx/other/getData
// pathRewrite: { // 标识替换
// '^/api': '/' //重写接口 后台接口指向不统一 所以指向所有/
// '^/api': '/api/mock'
// }
// }
// }
}
二. 基础配置示例
// cnpm install compression-webpack-plugin@6.1.1 -D
// cnpm i image-webpack-loader@8.1.0 --save-dev
// cnpm i uglifyjs-webpack-plugin@2.2.0 -D
// npm i webpack-bundle-analyzer@4.7.0 --save-dev || 结合 npm run build -report 使用
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 引入打包分析插件
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉注释
const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需引用
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩， 按需写入
const path = require("path");
const webpack = require("webpack");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
publicPath: "/", // 基本路径
outputDir: "dist", // 输出文件目录
assetsDir: "",
indexPath: "index.html",
filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
lintOnSave: "default",
runtimeCompiler: false,
transpileDependencies: [],
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
crossorigin: undefined,
integrity: false,
// webpack配置
chainWebpack: (config) => {
// 配置别名
config.resolve.alias
.set("@", resolve("src")) //设置@快捷到src目录
.set("assets", resolve("src/assets"))
.set("components", resolve("src/components"))
.set("static", resolve("src/static"));
// 删除预加载
config.plugins.delete("preload");
config.plugins.delete("prefetch");
// 压缩代码
config.optimization.minimize(true);
// 分割代码
config.optimization.splitChunks({
chunks: "all",
});
// 压缩图片
config.module
.rule("images")
.use(
"image-webpack-loader"
) /* 需要下载这个图片压缩loader npm install --save-dev image-webpack-loader */
.loader("image-webpack-loader")
.options({ bypassOnDebug: true })
.end();
// .options({
// mozjpeg: { progressive: true, quality: 65 },
// optipng: { enabled: false },
// pngquant: { quality: [0.8,0.9], speed: 4 },
// gifsicle: { interlaced: false },
// webp: { quality: 75 },
// });
},
configureWebpack: (config) => {
// 打包可视化分析
config.plugins.push(new BundleAnalyzerPlugin());
// 优化打包chunk-vendors.js文件体积过大
// 利用splitChunks将每个依赖包打包成单独的js文件，在生产环境下配置，
let optimization = {
runtimeChunk: "single",
splitChunks: {
chunks: "all",
maxInitialRequests: Infinity,
minSize: 20000, // 依赖包超过20000bit将被单独打包
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace("@", "")}`;
},
},
},
},
};
Object.assign(config, {
optimization,
});
// js 压缩
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
// UglifyJS 压缩选项。
compress: {
drop_debugger: true,
drop_console: true, // 生产环境自动删除console
pure_funcs: ["console.log"], //移除console
},
warnings: false,
},
parallel: true, // 使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
})
);
// 开启 gzip 压缩
// 注：生成的压缩文件以.gz为后缀，一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip。要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。
// 服务器配置参考：https://blog.csdn.net/a1983029606/article/details/115690820
config.plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: productionGzipExtensions,
threshold: 10240, // 只有大小大于该值的资源会被处理
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
})
);
},
// css相关配置
css: {
loaderOptions: {
// 启用less中javascript支持
less: {
// less-lorder配置项 详见 https://www.webpackjs.com/loaders/less-loader/#lessoptions
javascriptEnabled: true,
},
},
},
// 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
parallel: require("os").cpus().length > 1,
// webpack-dev-server 相关配置
devServer: {
host: "0.0.0.0", // ip 本地
port: 2023, // 设置端口号
inline: true, // 用于设置代码保存时是否自动刷新页面。默认：true
open: false, //配置自动启动浏览器，默认：false
hot: true, // 用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）。默认：true
https: false, // 用于设置是否启用https，默认：false
proxy: {
//设置代理
"/api": {
// 代理名称 凡是使用/api开头的地址都是用此代理
target: "http://1.2.3.4:5000/", // 需要代理访问的api地址
changeOrigin: true, // 允许跨域请求
pathRewrite: {
// 重写路径，替换请求地址中的指定路径
"^/api": "/", // 将请求地址中的/api替换为空，也就是请求地址中不会包含/api/
},
},
},
},
// 第三方插件配置
pluginOptions: {},
};
vue加载速度优化(cdn加速)：
https://blog.csdn.net/rayshaan0123/article/details/119703030
开启gzip压缩，nginx相关配置：
https://blog.csdn.net/a1983029606/article/details/115690820
开启 gzip 压缩，nginx配置实例：
location ~ .*\.(js|json|css)$ {
gzip on;
gzip_static on; # gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。
gzip_min_length 1k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text/css application/javascript application/json;
root /dist;
}
三. npm安装包–save和–save-dev 区别
-S(s)是--save的缩写 也就是 添加在dependencies生产环境中
-D(d)是--save-dev的缩写 也就是添加在devDependencies开发环境中
-G(g)是添加全局，比如我们要全局使用yarn工具，就可以全局安装，可以理解为添加了一个环境变量
dependencies文件夹
生产环境依赖。生产环境一般是位于服务器上的，一般只会放index.html 以及css和js这种静态资源。生产环境依赖则说明必须要使用该环境，比如axios等
devDependencies
开发环境依赖。也就是说只需要我们在写代码时需要使用的，比如babel，webpack等，这些在生产环境上是不需要的
如果只是npm i xxx，那么默认添加到生产依赖，也就是类似 npm i xxx --save
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/84935.html
