2024.07.01~2024.07.05
Raptor 使用 Vue Cli 启动过程
项目使用 vue-cli-service serve --open 启动，该命令会自动加载项目中与 package.json 同级目录下的 vue.config.js 文件。当然，也可以在 package.json 中配置 vue 字段来配置相关功能，这种方式不太好，暂时不做研究。
分析 vue.config.js 文件中的配置
publicPath
Tip：有的项目中中可能是
baseUrl，但是从 Vue CLI 3.3 起就已经弃用该字段
部署包时的基本 URL。举例子：项目在被打包后指定访问资源的路径，我们项目打包后被部署到 https://www.qiandu.com/，那么我们将该值设置为 '/' 则就会在跟路径上访问资源；而如果项目打包后被部署到 https://www.qiandu.com/my-app/，则就应该将该值设置为 '/my-app/'。
上面讲的都是绝对路径的情况，该值还可以被设置为 ''或者'./'，这样所有的的资源都会被链接为相对路径，而这样打包出来的资源也就可以被部署到任何路径上。但是，这种情况需要额外注意不可以在 history 路由中使用。为什么？因为 history 的路由一般是 https://www.qiandu.com/my-app/app，如果设置为相对路径那么就会尝试在 /app 目录下查找资源，这会导致资源找不到。
lintOnSave
影响开发时（vue-cli-service serve）保存文件是否使用 eslint-loader lint 代码，它受 @vue/cli-plugin-eslint 插件影响。
css.extract
通常情况下，开发环境为
false，表示 CSS 被嵌入到 JS 中以便支持热重载等功能；在生产环境构建时为true，便于将 CSS 文件独立出去，使用 HTTP 缓存来缓存 CSS 资源，减少 JS 代码执行的负担。
是否将 CSS 提取到一个单独的 CSS 文件中。
css.loaderOptions
预处理 CSS 的 loader 配置。
css: {
loaderOptions: {
sass: {
additionalData: '@import \'@/styles/var.scss\';@import \'@/styles/mix.scss\';'
}
}
}
上面的配置就是处理 sass、scss 文件，往每一个文件头部插入 additionalData 中的内容。
通常就是处理在头部导入公用变量等操作。
chainWebpack
可以对内部的 webpack 配置进行更加细粒度的修改。
例如：
- 去除缓存 【防止缓存影响】
config.module.rule('vue').uses.delete('cache-loader');
config.module.rule('js').uses.delete('cache-loader');
// ...
- 使用
lodash的模块，去除无用模块 【性能优化】
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
config.plugin('lodashModuleReplacementPlugin').use(new LodashModuleReplacementPlugin());
- 开发环境中禁止 js 文件缓存 【防止缓存影响】
if (NODE_ENV !== 'production') {
const filename = 'js/[name].[hash:8].js';
config.output.filename(filename).chunkFilename(filename);
}
- 导出库的方式（
UMD、AMD等方式）、库名、是否使用jsonpFunction【名称统一】
const packagename = require('./package.json').name;
config.output
.library(packagename)
.libbraryTarget('UMD')
// 按需加在相关（默认名称为：webpackJsonp${packagename}）
.jsonpFunction(`webpackJsonp_${packagename}`);
- 某些第三方库不进行打包，单独引入 【性能优化】
const externals = {
vue: 'Vue',
['vue-router']: 'VueRouter',
vuex: 'Vuex'
};
const cdns = ['cdn url'];
config.externals(externals);
config.plugin('html').tap(args => {
args[0].cnds = cdns;
return args;
})
- 提取并压缩项目中的 css 到单独的文件，并设置
publicPath解决资源路径引用问题 【性能优化】
const cssAttr = ['sass', 'scss', 'less', 'postcss', 'css', 'stylus'];
const cssRule = ['vue-modules', 'vue', 'normal-modules', 'normal'];
cssArr.forEach(item => {
cssRule.forEach(rule => {
config.module.rule(item).oneOf(rule)
.use('extract-css-loader').loader(MiniCssExtractPlugin.loader)
.tap(args => {
if (args) {
args.publicPath = publicPath;
}
return args;
});
});
});
- 定义项目中的全局常量，便于在项目中的任何地方都可以使用该值 【易用性】
// 项目中可以在任意地方使用 process.env.PUBLIC_PATH 的值
config.plugin('define').tag(args => {
args[0]['procrss.env'].PUBLIC_PATH = JSON.stringify(process.env.PUBLIC_PATH);
return args;
});
configureWebpack
webpack 的配置项，可以使用 speed-measure-webpack-plugin 库来统计打包数据，为性能优化提供帮助。
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin({
disable: true
});
{
configureWebpack: smp.wrap({
plugins: [
// ...plugins
],
})
}
devServer
开发环境中提供的开发服务器，可以配置鉴权、代理等信息。