Vite 配置篇：搭建项目基础结构！

vite 项目创建

npm create vite@latest

✔ Project name: … <your-project-name> 项目名称
✔ Add TypeScript? … No / Yes TS
✔ Add JSX Support? … No / Yes JSX
✔ Add Vue Router for Single Page Application development? … No / Yes Vue-Router
✔ Add Pinia for state management? … No / Yes Pinia
✔ Add Vitest for Unit testing? … No / Yes 单元测试
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright 端对端测试
✔ Add ESLint for code quality? … No / Yes 
✔ Add Prettier for code formatting? … No / Yes

vite.config.js 基本配置

初始化文件

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 设置别名
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

设置别名

除了官方设置别名的方式，再推荐一下两种设置别名的方式。

import path from "path"
const pathResolve = (dirPath) => path.resolve(process.cwd(), dirPath)
export default defineConfig({
  resolve: {
    // 第一种方法
    alias:{
      '@':`${pathResolve('src')}`
    }
    // 第二种方法
    alias: [
      {
        find: '@',
        replacement: `${pathResolve("src")}`,
      },
    ],
  }
});

设置端口号

端口号默认为 3000

export default defineConfig({
  server：{
    port: 3030
  }
})

自动打开应用程序

默认为 false

export default defineConfig({
  server: {
    open: true,
  },
});

跨域处理

跨域一般表现在前端在调用接口时，浏览器出现 403 报错的情况。这是由于浏览器的同源策略：不同域名，协议，端口，发生异步请求时浏览器会阻止这样的行为。我们可以启动一个本地的代理服务器来规避同源策略，通过修改相应的配置来实现跨域请求（反向代理）。

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "请求地址",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

控制浏览器输出

在开发环境下，我们往往会使用 console.log 或者 debugger 去调试代码，对于多人协同开发的项目，并不能确保所有人都会在调试完后及时的去注释掉这些代码。而在生产环境，我们并不想要这些没有用的输出，所以我们可以进行以下配置。

export default defineConfig({
  build: {
    // 需配置minify:"terser"，否则无效
    // 官方文档说明 minify 的默认值为 Esbuild,它要比 terser 快 20-40 倍
    // 所以说进行这些配置是有代价的，最好还是能够及时的去注释掉这些代码
    // 安装terser npm add -D terser
    minify: "terser",
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
});

解决 vite 打包杂乱问题

默认情况下 vite 打包后文件（除 index.html）都是放在同一个文件夹 assets 下。而我们希望 js 文件放在 js 文件夹下，css 文件放在 css 文件夹下。

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "static/[ext]/[name]-[hash].[ext]",
      },
    },
  },
});

配置前：

配置后：

css 预处理器

• less、sass、scss 才算是 css 预处理器，所以在这引入 css 文件是没有效果的。
• 需要在 main.js 引入一个其它的 scss 文件，或者在 app.vue 文件中使用 lang="scss"并且里面要有内容，只有这样，这里配置的 css 预处理器才有效。

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
        @import "@/assets/css/base.scss";
        @import "@/assets/css/fonticon.scss";
        @import "@/assets/css/icon.scss";
        @import "@/assets/css/global.scss";
        `,
      },
    },
  },
});

完整代码

import { fileURLToPath, URL } from "node:url";
import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const pathResolve = (dirpath) => path.resolve(process.cwd(), dirpath);

export default defineConfig({
  resolve: {
    // 第一种方法
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
    // 第二种方法
    // alias: {
    //   "@": `${pathResolve("src")}`,
    // },
    // 第三种方法
    // alias: [
    //   {
    //     find: "@",
    //     replacement: `${pathResolve("src")}`,
    //   },
    // ],
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
        @import "@/assets/css/index.scss";
        @import "@/assets/css/index.sass";
        `,
      },
    },
  },
  server: {
    port: 3030,
    open: true,
    proxy: {
      "/api": {
        target: "http://1.15.106.109:8086",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  plugins: [vue()],
  build: {
    minify: "terser",
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "static/[ext]/[name]-[hash].[ext]",
      },
    },
  },
});