vue2项目从0到1记录

news2024/9/21 1:20:54

脚手架需要安装完

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,  // 默认是false
	loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
      }
    }
}