vue2项目从0到1记录
脚手架需要安装完
npm install -g @vue/cli
1. 使用脚手架创建项目
vue create 项目名
2. 引入样式重置normalize.css插件 // 统一浏览器样式
安装：npm install --save normalize.css
引入：import 'normalize.css/normalize.css'
3. 根据部署环境判断是否要添加环境变量文件
4. 配置vue.config.js文件
4.1 配置publicPath为’./’
如果配置了publicPath，打包生成的依赖路径会添加上对应目录名
4.2 配置outputDir，assetsDir，indexPath
4.3 配置filenameHashing
4.4 配置本地运行环境devServer
4.5 配置webpack-chain
4.5.1 基础配置：添加html相关配置：title，cdn，meta时间分支记录
4.5.2 缓存问题：添加输出js文件时间戳
4.5.3 性能优化：cdn引入依赖和外部扩展externals
配置externals，控制打包的不打包第三方依赖，减少打包时间。
针对不打包的依赖使用cdn的方式引入
4.5.4 打包优化：多进程打包thread-loader
// 安装
pnpm i thread-loader -D
// 使用node内置模块
const os = require('os')
// cpu核数
const threads = os.cpus().length - 1
4.5.5 打包优化：分包optimization
使用optimization.splitChunks
4.5.6 打包优化：压缩包文件CompressionWebpackPlugin，压缩代码TerserPlugin
CompressionWebpackPlugin需要运维配置
// 压缩资源
pnpm install compression-webpack-plugin --save-dev
// 优化js的输出成果（如清除debugger和console）
pnpm install terser-webpack-plugin --save-dev
// 使用
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin');
4.6 配置configureWebpackvue.config.js文件webpack相关（configureWebpack属性内）
4.6.1 插件NodePolyfillPlugin
因为webpack5移除了node的polyfill自动引入，所以会导致运行失败
// 安装：
pnpm install node-polyfill-webpack-plugin
// 使用：
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
4.6.2 插件AutoImport
自动导入模块
const AutoImport = require('unplugin-auto-import/webpack')configureWebpack: {plugins: [new NodePolyfillPlugin(),AutoImport({include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/, // .vue/\.md$/ // .md],imports: [{'vue': ['ref','unref','toRef','toRefs','onMounted','onUnmounted','computed','watch','reactive','getCurrentInstance','defineProps','onBeforeUnmount','defineEmits','nextTick','defineComponent'],'@/../pingbiao.config': [// default imports['default', 'appConfig'] // import { default as appConfig } from '@/../pingbiao.config',]}]})}}
4.6.3 插件HtmlWebpackPlugin
Vue CLI支持通过chainWebpack配置来自定义HtmlWebpackPlugin，也可以单独引入配置
4.6.4 插件CopyWebpackPlugin
用于将文件从源目录复制到构建目录
npm install copy-webpack-plugin --save-dev
const CopyPlugin = require('copy-webpack-plugin');module.exports = {plugins: [new CopyPlugin({patterns: [{ from: 'source', to: 'dest' },{ from: 'other', to: 'public' },],}),],
};
4.6.5 插件SpeedMeasureWebpackPlugin
分析打包速度
5. Css配置
Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。
css:{// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中extract: false, // 生产环境下是 true，开发环境下是 false// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。sourceMap: false, // 默认是falseloaderOptions: {css: {// 这里的选项会传递给 css-loader},postcss: {// 这里的选项会传递给 postcss-loader}}
}