最近升级了一波用vue3的composition-api写代码爽到不行，在加上各种推荐vite去构建vue3，好奇搞了一波，以下的自己的一些想法

.browserslistrc

这个不用说老配方

> 1%
last 2 versions

postcss.config.js

module.exports = {
  plugins: {
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: { remove: false },
  },
};

项目风格配置

安装的插件

  "eslint": "^7.29.0",
  "eslint-config-prettier": "^8.3.0",
  "prettier": "^2.3.1",
  "vue-eslint-parser": "^7.6.0",
  "eslint-plugin-prettier": "^3.4.0"

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  parser: 'vue-eslint-parser',
  rules: {
    'no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 'off',
    'no-cond-assign': 2, //条件语句的条件中不允许出现赋值运算符
    'no-const-assign': 2, //禁止修改const声明的变量
    'no-dupe-keys': 2, //在创建对象字面量时不允许键重复 {a:1,a:1}
    'no-dupe-args': 2, //函数参数不能重复
    'no-duplicate-case': 2, //switch中的case标签不能重复
    'no-func-assign': 2, //禁止重复的函数声明
    'no-extra-parens': 2, //禁止非必要的括号
    'no-extra-semi': 2, //禁止多余的冒号
    'no-irregular-whitespace': 2, //不能有不规则的空格
    'vue/attributes-order': 'off',
    'vue/one-component-per-file': 'off',
    'vue/html-closing-bracket-newline': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/attribute-hyphenation': 'off',
    'vue/require-default-prop': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ],
  },
};

.eslintignore

# 忽略文件和文件夹
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.json
Dockerfile

prettier.config.js

module.exports = {
  printWidth: 100, // 每行代码长度（默认80）
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  semi: true, // 声明结尾使用分号(默认true)
  vueIndentScriptAndStyle: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  trailingComma: 'es5', // 多行使用拖尾逗号（默认none）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  jsxSingleQuote: false,
  arrowParens: 'always', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'lf',
  rangeStart: 0,
};

vite.config.js

这里有个坑就是在vite1和vite2 alias在vite.config.js位置不一样 vite1是在alias，vite2是在resolve.alias

'use strict';
import path from 'path';
import vue from '@vitejs/plugin-vue';
import compressPlugin from 'vite-plugin-compression';
import { defineConfig } from 'vite';
import html from 'vite-plugin-html';
function resolve(dir) {
  return path.join(__dirname, dir);
}
const BASE_URL = '/';
export default defineConfig({
  // 部署应用包时的基本 URL
  base: BASE_URL,
  root: process.cwd(),
  // 输出文件目录
  outDir: 'dis',
  // 作为静态资源服务的文件夹
  publicDir: 'public',
  // 文件别名
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve('src'),
      },
    ],
    extensions: ['.js', '.vue', '.json'],
  },
  // 服务配置
  server: {
    port: 8080, // 配置端口
    open: true, // 自动开启浏览器
    '/api': {
      target: 'http://***.*.*.*:***',
      changeOrigin: true,
      secure: false,
      // ws: true, // 是否启用websockets
      // rewrite: (path) => path.replace(/^\/bins/, '')
    },
  },
  build: {
    target: 'es2015',
    // sourcemap: true,
    // 清除console debugger
    terserOptions: {
      compress: {
        // Pass true to prevent Infinity from being compressed into 1/0, which may cause performance issues on Chrome
        keep_infinity: true,
        drop_console: true,
        drop_debugger: true,
      },
    },
    // Turning off brotliSize display can slightly reduce packaging time
    brotliSize: false,
    chunkSizeWarningLimit: 2000,
  },
  plugins: [
    vue(),
    compressPlugin({
      ext: '.gz', //gz br
      algorithm: 'gzip', //brotliCompress gzip
      verbose: true,
      disable: false,
      threshold: 1,
    }),
    html({
      minify: true,
      inject: {
        injectData: {
          title: 'vite with vue3',
          // cdn 配置
          cdn: {
            css: [],
            js: [],
          },
          BASE_URL: BASE_URL,
        },
      },
    }),
  ],
});

其中compressPlugin用来打包gizp html就是我们去配置html模板的一些信息，我里面加了一个cdn 用来存放我们的css和js 对应的html模板如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="<%- BASE_URL %>favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%- title %></title>
  <!-- 使用CDN的CSS文件 -->
  <% cdn&&cdn.css.forEach(function(css){ %>
  <link rel="stylesheet" href="<%- css %>" />
  <% }); %>
  <!-- 使用CDN的JS文件 -->
  <% cdn&&cdn.js.forEach(function(js){ %>
  <script type="text/javascript" src="<%- js%>"></script>
  <% }); %>
  <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
		<![endif]-->
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

最最最后附上地址基佬地址