vue.config.js是 Vue CLI 3 及以上版本项目中的配置文件，用于配置 Vue.js 应用的各种构建设置。
const path = require('path');
//resolve这是一个辅助函数，用于生成绝对路径。将相对路径转换为绝对路径
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
// 项目部署的基础路径
// 默认情况下，我们假设你的应用将被部署在域的根目录下
// 比如 https://www.my-app.com/
// 如果应用被部署在一个子路径上，你需要在这里指定子路径
// 比如 https://www.foobar.com/my-app/
// 需要配置为 '/my-app/'
publicPath: '/',
// 将构建好的文件输出到哪里
outputDir: 'dist',
// 放置静态资源的地方 (js/css/img/font/...)
assetsDir: 'assets',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)
// 可以是相对路径也可以是绝对路径
indexPath: 'index.html',
// 默认在生成的静态资源文件名中包含 hash 以便更好的控制缓存
filenameHashing: true,
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
productionSourceMap: true,
//兼容ie, transpileDependencies, 需要以兼容模式打包的依赖名称或文件夹，文件等
transpileDependencies: [],
// 在开发环境下通过 eslint-loader 在每次保存时 lint 代码
// 这个值会在 @vue/cli-plugin-eslint 被安装之后生效
lintOnSave: process.env.NODE_ENV !== 'production',
// 是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
// webpack 配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
configureWebpack: {
// 在这里可以进行webpack配置
// 该对象将被 webpack-merge 合并入最终的 webpack 配置
output: {
// 定义导出的库名称
library: 'MyLibraryName',
// 定义库的目标格式
// 'var': 作为变量导出。
// 'umd': 通用模块定义，适用于 AMD、CommonJS 和浏览器全局变量。
// 'commonjs2': 适用于 CommonJS 环境。
// 'window': 作为 window 对象的属性导出。
//'global': 作为 global 对象的属性导出（Node.js）。
//'jsonp': 作为 JSONP 回调函数的名称。
libraryTarget: 'umd',
// JsonpFunction 是 Webpack 用于 JSONP 回调函数的名称，避免与其他 Webpack 实例冲突
jsonpFunction: `webpackJsonp_MyLibraryName`
}
},
// webpack 链式操作
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: config => {
// 这里可以进行链式操作的webpack配置
// 1. 移除默认的 svg 处理规则中的 src/icons 目录
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end();
// 2. 添加一个新的名为 icons 的规则，用于处理 src/icons 目录下的 svg 文件
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({ symbolId: 'icon-[name]' })
.end();
// 使用 DefinePlugin 插件定义环境变量
config.plugin('define').tap(args => {
let obj = args[0]['process.env'];
obj.VUE_APP_BUILD_TIME = JSON.stringify(new Date().toLocaleString());
return args;
});
//配置gzip压缩
const CompressionWebpackplugin = require('compression-webpack-plugin')
if (process.env.NODE_ENV === 'production') {
config.plugin('CompressionWebpackplugin').use(
new CompressionWebpackplugin({
test: /.(js|css)$/, // 要压缩的文件格式
filename: '[path].gz[query]', // 压缩后文件名保持原名加.gz
threshold: 10240, // 超过10kb就压缩
minRatio: 0.8 //压缩率小于0.8才会压缩
})
）
}
},
// 配置 css 相关
css: {
// 是否使用 css 分离插件 ExtractTextPlugin
extract: true,
// 是否开启 CSS source map？
sourceMap: false,
// css预设器配置项
loaderOptions: {
css: {},
postcss: {}
},
// 启用 CSS modules for all css / pre-processor files.
requireModuleExtension: true
},
// webpack-dev-server 相关配置
devServer: {
// 设置端口
port: 8080,
// 设置主机名
host: '0.0.0.0',
// 是否启用 HTTPS
https: false,
// 是否在浏览器中自动打开
open: true,
// 启用 gzip 压缩
compress: true,
// 配置代理，解决跨域问题
proxy: {
'/api': {
target: 'http://localhost:3000', // 代理目标地址
changeOrigin: true, // 是否改变请求源
pathRewrite: {
// 重写路径
'^/api': ''
}
}
}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
config.module.rule('svg').exclude.add(resolve('src/icons')).end():
- 这是链式调用，用于修改默认的
svg处理规则。 config.module.rule('svg')：获取名为svg的处理规则。.exclude.add(resolve('src/icons'))：从默认的svg处理规则中排除src/icons目录。这意味着src/icons目录下的 SVG 文件将不会被默认的 SVG 处理规则处理。.end()：结束当前链式调用。
config.module.rule('icons').test(/.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({ symbolId: 'icon-[name]' }).end():
config.module.rule('icons')：添加一个新的名为icons的处理规则。.test(/\.svg$/)：指定该规则适用于所有以.svg结尾的文件。.include.add(resolve('src/icons'))：只包含src/icons目录中的 SVG 文件。.use('svg-sprite-loader')：使用svg-sprite-loader来处理这些 SVG 文件。.loader('svg-sprite-loader')：指定使用的加载器。.options({ symbolId: 'icon-[name]' })：为svg-sprite-loader提供选项。symbolId: 'icon-[name]'指定生成的 symbol 的 id 格式，其中[name]是原始文件名。.end()：结束当前链式调用。
svg-sprite-loader
- 该加载器将多个 SVG 文件合并为一个 SVG 精灵图，并为每个 SVG 文件生成一个
<symbol>元素。 - 通过
symbolId: 'icon-[name]'，每个<symbol>元素的id属性将设置为icon-加上原始文件名。这使得在 HTML 文件中可以通过<use xlink:href="#icon-[name]">来引用这些图标。 - 将所有 SVG 图标集中在
src/icons目录下，并通过svg-sprite-loader处理，生成一个 SVG 精灵图，有助于优化图标的管理和使用。 - 避免了多个 HTTP 请求，提高了加载性能。
// 使用 DefinePlugin 插件定义环境变量
config.plugin('define').tap(args => { let obj = args[0]['process.env']; obj.VUE_APP_BUILD_TIME = JSON.stringify(new Date().toLocaleString()); return args; });
-
config.plugin('define').tap(args => {...}):
config.plugin('define')：获取DefinePlugin插件的配置。.tap(args => {...})：修改DefinePlugin插件的配置。tap方法接收一个函数，该函数的参数args是插件的现有配置。
-
let obj = args[0]['process.env']:
args[0]['process.env']是DefinePlugin插件当前的环境变量配置对象。obj变量指向这个对象，可以在该对象上添加新的环境变量。
-
obj.VUE_APP_BUILD_TIME = JSON.stringify(new Date().toLocaleString()):
- 添加一个新的环境变量
VUE_APP_BUILD_TIME，其值为当前的构建时间。 new Date().toLocaleString()获取当前日期和时间，并转换为本地化的字符串格式。JSON.stringify将日期字符串转换为 JSON 格式的字符串，确保它在生成的代码中被正确处理。
- 添加一个新的环境变量
-
return args:
- 修改后的
args数组需要返回，以应用新的配置。
- 修改后的
