vue3+vite 配置

vue3 和 vite 配置

一、开发相关配置

1、配置路径别名 alias

import { fileURLToPath, URL } from "node:url";
resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  },

2、代理配置 Proxy

server: {
    open: false,
    port: 3005,
    host: "0.0.0.0",
    proxy: {
      "/api": {
        target: "https://baidu.com/api/",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, "")
      },
      "/ws-api": {
        target: "wss://baidu.com/api",
        changeOrigin: true, //是否允许跨域
        ws: true
      }
    }
}

3、prettier 配置

export default {
  printWidth: 100, // 每行代码长度（默认80）
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）ab进行缩进（默认false）
  useTabs: false, // 是否使用t
  singleQuote: true, // 使用单引号（默认false）
  semi: true, // 声明结尾使用分号(默认true)
  trailingComma: 'all', // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  // 箭头函数参数括号 默认avoid 可选 avoid| always
  // avoid 能省略括号的时候就省略 例如x => x
  // always 总是有括号
  arrowParens: 'avoid',
  endOfLine: 'auto',  // 因为prettier的规范和eslint的换行规则不同，所以这个必须配置。要不然每次打开文件都会有一堆的警告
}

二、打包相关配置

1、全局变量和多环境配置

// .env;
# 页面标题
VITE_APP_TITLE = "vuve3"
# 开发环境配置
VITE_APP_ENV = 'development'
# 开发环境
VITE_APP_BASE_API = '/dev-api'
# 基础路由
VITE_APP_BASE_URL = '/myapp'
#打包后目录
VITE_APP_outDir = "dev_dist"

// .evn.production
# 页面标题
VITE_APP_TITLE = "文旅地图"
# 开发环境配置
VITE_APP_ENV = 'porduction'
# /开发环境
VITE_APP_BASE_API = '/prod-api'
# 基础路由
VITE_APP_BASE_URL = '/myapp'
#打包后目录
VITE_APP_outDir = "porduction_dist"

// .env.devbuild

// package.josn 中配置指定那个环境配置使用 --mode devbuild
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:dev":"vite build --mode devbuild",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },

https://cn.vitejs.dev/guide/env-and-mode.html#env-files
https://cn.vitejs.dev/config/
import { defineConfig, loadEnv } from "vite";
export default defineConfig(({command, mode}) => {
    // 根据当前工作目录中的 `mode` 加载 .env 文件
    const env = loadEnv(mode, process.cwd());
});

2、浏览器兼容性问题

vue3 不再兼容ie

3、gzip 压缩打包配置

    vite-plugin-compression
    import viteCompression from 'vite-plugin-compression';
    targets:[viteCompression()]

4、cdn 配置

vite-plugin-cdn2
vite-plugin-cdn-import2
等插件包

5、图片压缩

国内安装报错解决方法
使用yarn在package.json内配置（推荐）
"resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
}
vite-plugin-compression

6、scss 使用

https://cn.vitejs.dev/guide/features.html

npm add -D sass

三、通用配置

import { fileURLToPath, URL } from "node:url";
import { defineConfig,mode } from "vite";
import vue from "@vitejs/plugin-vue";
import legacy from '@vitejs/plugin-legacy'
import viteCompression from 'vite-plugin-compression';
import viteImagemin from 'vite-plugin-imagemin'

//https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md  gzip 压缩
//https://github.com/vbenjs/vite-plugin-imagemin/blob/main/README.zh_CN.md  图片压缩
//npm i sass-loader sass -D

// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  const env = loadEnv(mode, process.cwd());
  console.log("配置",env);
  return  {
    // 打包后 静态资源路径前缀 index.html中的链资源会加上这个前缀
    // 如: <link rel="modulepreload" crossorigin href="/myapp/assets/vue-router-1b19bf1b.js">
    base: env.VITE_APP_BASE_URL,
    plugins: [
      vue(),
      legacy({ targets: ["defaults", "not IE 11"] }),
      viteImagemin({
        verbose: true,
        gifsicle: {
          optimizationLevel: 3,
          interlaced: false
        },
        optipng: {
          optimizationLevel: 7
        },
        mozjpeg: {
          quality: 50
        },
        pngquant: {
          quality: [0.6, 0.9],
          speed: 4
        },
        svgo: {
          plugins: [
            {
              name: "removeViewBox"
            },
            {
              name: "removeEmptyAttrs",
              active: false
            }
          ]
        }
      }),
      viteCompression({ ext: ".gz", algorithm: "gzip", deleteOriginFile: false })
    ],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url))
      }
    },
    build: {
      sourcemap: false,
      /*
        公共基础路径, 路由配置 history: createWebHistory(import.meta.env.VITE_APP_BASE_URL)
        如： www.xxx.com/myapp/
        ng 部署在myapp目录下
      */
      outDir: env.VITE_APP_outDir, //打包后的输出目录
      assetsInlineLimit: 4096,
      chunkSizeWarningLimit: 1024 * 2,
      rollupOptions: {
       //  external: ['vue', 'vuex', 'vueRouter' ], // 不打包这几项;单独引入cdn
        output: {
          manualChunks(id) {
            if (id.includes("node_modules")) {
              return id.toString().split("node_modules/")[1].split("/")[0].toString();
            }
          }
        }
      }
    },
    server: {
      open: false,
      port: 3006,
      host: "0.0.0.0"
      // proxy: {
      //   "/api": {
      //     target: "https://test-api.test.com/api/",
      //     changeOrigin: true,
      //     rewrite: (path) => path.replace(/^\/api/, "")
      //   },
      //   "/ws-api": {
      //     target: "wss://test-api.test.com",
      //     changeOrigin: true, //是否允许跨域
      //     ws: true
      //   }
      // }
    }
  };
});