如何用ts搭建一个vue3通用项目底座 | 第三篇：vite配置

已于 2024-08-30 17:25:02 修改
阅读量1.4k 收藏 30
点赞数 40
分类专栏： 前端通用系统模板 文章标签： vue.js 前端 typescript vue-cli3
于 2024-08-30 11:18:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pasco152/article/details/141680313
版权

前言

接下来进入项目搭建的重点部分：Vite配置。
本篇内容可能会有些多，耐心看完会有很多收获。

1、在根目录下新建一个build文件夹

虽然vue从很早就使用vue.config.js或者vite.config.ts来进行打包配置，但在webpack时期，似乎是用build文件夹来进行打包配置的，所以这里也使用build文件夹。
在这里插入图片描述
先看一下需要进行的打包配置，后面我会逐个文件的解释。

2、vite配置

先把vite.config.ts文件放出来，后面再一项一项解析

// vite.config.ts
import {
    ConfigEnv, loadEnv, UserConfig } from 'vite';
import {
    resolve } from 'path';

import pkg from './package.json';
import dayjs from 'dayjs';

import {
    exclude, include } from './build/optimize';
import {
    createProxy } from './build/vite/proxy';
import {
    wrapperEnv } from './build/utils';
import {
    createVitePlugins } from './build/vite/plugins';
import {
    OUTPUT_DIR } from './build/constant';
import {
    generateModifyVars } from './build/generate/generateModifyVars';

function pathResolve(dir: string) {
   
  return resolve(process.cwd(), '.', dir);
}

const {
    dependencies, devDependencies, name, version } = pkg;
const __APP_INFO__ = {
   
  pkg: {
    dependencies, devDependencies, name, version },
  // lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  lastBuildTime: dayjs().unix(),
};

export default ({
    command, mode }: ConfigEnv): UserConfig => {
   
  const root = process.cwd();

  const env = loadEnv(mode, root);

  const viteEnv = wrapperEnv(env);

  const {
    VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE } = viteEnv;

  const isBuild = command === 'build';

  return {
   
    base: VITE_PUBLIC_PATH,
    root,
    resolve: {
   
      alias: [
        // // 避免vue-i18n警告
        // {
   
        //   find: 'vue-i18n',
        //   replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
        // },
        // /@/xxxx => src/xxxx
        {
   
          find: /\/@\//,
          replacement: pathResolve('src') + '/',
        },
        // /#/xxxx => types/xxxx
        {
   
          find: /\/#\//,
          replacement: pathResolve('types') + '/',
        },
      ],
    },
    server: {
   
      // 监听所有本地IP
      host: true,
      port: VITE_PORT,
      // 从.env加载代理配置
      proxy: createProxy(VITE_PROXY),
    },
    esbuild: {
   
      // 从.env加载no_console
      drop: VITE_DROP_CONSOLE ? ['console', 'debugger'] : [],
    },
    build: {
   
      sourcemap: true,
      // 兼容原生ESM的浏览器
      target: 'es2015',
      // 兼容移动端css样式
      cssTarget: 'chrome80',
      // 生成打包文件名称 dist
      outDir: OUTPUT_DIR,
      // 不报告压缩大小
      reportCompressedSize: false,
      // 消除打包大小超过500kb警告
      chunkSizeWarningLimit: 4000,
      rollupOptions: {
   
        output: {
   
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: 'js/[name].[hash].js',
          // 用于命名代码拆分时创建的共享块的输出命名
          chunkFileNames: 'js/[name].[hash].js',
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          assetFileNames: (assetInfo: any) => {
   
            const info = assetInfo.name.split('.');
            let extType = info[info.length - 1];
            if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)) {
   
              extType = 'media';
            } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
   
              extType = 'img';
            } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
   
              extType = 'fonts';
            }
            return `${
     extType}/[name].[hash].[ext]`;
          },
        },
        // 这一部分等后续nginx熟练了再启用
        // output: {
   
        //   // 最小化拆分包
        //   manualChunks: (id) => {
   
        //     if (id.includes('node_modules')) {
   
        //       return id.toString().split('node_modules/')[1].split('/')[0].toString();
        //     }
        //   },
        //   // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        //   entryFileNames: `${OUTPUT_DIR}/js/[name].[hash].js`,
        //   // 用于命名代码拆分时创建的共享块的输出命名
        //   chunkFileNames: `${OUTPUT_DIR}/js/[name].[hash].js`,
        //   // 用于输出静态资源的命名，[ext]表示文件扩展名
        //   assetFileNames: `${OUTPUT_DIR}/[ext]/[name].[hash].[ext]`,
        // },
      },
    },
    define: {
   
      // 定义全局变量替换方式
      __APP_INFO__: JSON.stringify(__APP_INFO__),
    },
    css: {
   
      preprocessorOptions: {
   
        scss: {
   
          additionalData: generateModifyVars(),
        },
      },
    },
    // 插件
    plugins: createVitePlugins(viteEnv, isBuild),
    // 依赖预构建配置项
    optimizeDeps: {
   
      include,
      exclude,
    },
  };
};

全部粘贴过去以后会有很多爆红，没事先都注释掉，后面逐项放开。

// vite.config.ts
// import { ConfigEnv, loadEnv, UserConfig } from 'vite';
import {
    UserConfig } from 'vite';
import {
    resolve } from 'path';

import pkg from './package.json';
// import dayjs from 'dayjs';

// import { exclude, include } from './build/optimize';
// import { createProxy } from './build/vite/proxy';
// import { wrapperEnv } from './build/utils';
// import { createVitePlugins } from './build/vite/plugins';
// import { OUTPUT_DIR } from './build/constant';
// import { generateModifyVars } from './build/generate/generateModifyVars';

function pathResolve(dir: string) {
   
  return resolve(process.cwd(), '.', dir);
}

const {
    dependencies, devDependencies, name, version } = pkg;
const __APP_INFO__ = {
   
  pkg: {
    dependencies, devDependencies, name, version },
  // lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  // lastBuildTime: dayjs().unix(),
};

export default (): UserConfig => {
   
  // export default ({ command, mode }: ConfigEnv): UserConfig => {
   
  const root = process.cwd();

  // const env = loadEnv(mode, root);

  // const viteEnv = wrapperEnv(env);

  // const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE } = viteEnv;

  // const isBuild = command === 'build';

  return {
   
    // base: VITE_PUBLIC_PATH,
    root,
    resolve: {
   
      alias: [
        // 避免vue-i18n警告
        {
   
          find: 'vue-i18n',
          replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
        },
        // /@/xxxx => src/xxxx
        {
   
          find: /\/@\//,
          replacement: pathResolve('src') + '/',
        },
        // /#/xxxx => types/xxxx
        {
   
          find: /\/#\//,
          replacement: pathResolve('types') + '/',
        },
      ],
    },
    server: {
   
      // 监听所有本地IP
      host: true,
      // port: VITE_PORT,
      // 从.env加载代理配置
      // proxy: createProxy(VITE_PROXY),
    },
    esbuild: {
   
      // 从.env加载no_console
      // drop: VITE_DROP_CONSOLE ? ['console', 'debugger'] : [],
    },
    build: {
   
      sourcemap: true,
      // 兼容原生ESM的浏览器
      target: 'es2015',
      // 兼容移动端css样式
      cssTarget: 'chrome80',
      // 生成打包文件名称 dist
      // outDir: OUTPUT_DIR,
      // 不报告压缩大小
      reportCompressedSize: false,
      // 消除打包大小超过500kb警告
      chunkSizeWarningLimit: 4000,
      rollupOptions: {
   
        output: {
   
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: 'js/[name].[hash].js',
          // 用于命名代码拆分时创建的共享块的输出命名
          chunkFileNames: 'js/[name].[hash].js',
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          assetFileNames: (assetInfo: any) =><
最低0.47元/天 解锁文章
Vue3 项目实例（二）vite.config.ts的配置与axios安装
沉淀，积累、进步
04-06 865
注意：path模块找不到查看是否安装@type/node,快速修复安装同时 ts.config.json中加入一下代码--host 更改更改后文件。
vue3+ts项目搭建
weixin_47821983的博客
11-22 2672
a) 完成以上的步骤以后会生成 eslint.config.js 文件 这个是eslint9 以后的版本(我也找了很多资料最后在github中拔了一个项目以后才配置好的)Ⅱ、修改npm的下载源 （因为默认指向的是 国外的下载地址，指向淘宝下载地址，下载速度就会很快）1、检查是否安装pnpm (默认npm安装成功的情况下，也就是安装了node)c) tsconfig.json 配置这个可以@别名的问题。b)修改配置vite.config.ts。eslint.config.js 的配置 具体如下。
vue3+vite+ts配置
web$-小白
06-24 4002
指的是软件开发中用于正式运行和交付的环境，生产环境一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。这样就定义了一个名为 --primary-color 的全局变量，可以在整个页面中使用。注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器！开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试。都是用于定义 CSS 变量的方法，但它们有一些区别。测试环境（testing）
使用 Vite 创建 Vue3 项目的详细流程
最新发布
2301_76428778的博客
03-25 2118
以上流程涵盖了从环境准备到项目部署的完整步骤，并且提供了在项目开发中常用的技巧与插件，帮助你更高效地进行 Vue3 项目开发。，你将看到 Vue3 项目的默认欢迎页面。
vue3 vite.config.ts 配置
Y273849的博客
10-26 1736
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import styleImport from 'vite-plugin-style-import' import { resolve } from 'path' // https://vitejs.dev/config/ export default defineConfig({ base: './',//打包后的静态资源路径修改 plugins: [
vue3的vite配置
weixin_52663662的博客
11-27 3379
vue3的vite配置
如何用ts搭建一个vue3通用项目底座 | 第六篇：axios封装
pasco152的博客
09-04 1403
至此，整个vue3通用项目底座完成。源码参考[common-template](https://gitee.com/hit-point/common-template)。
如何用ts搭建一个vue3通用项目底座 | 第五篇：项目初始化配置
pasco152的博客
09-03 582
完善一下项目初始化配置，分为store配置、初始化内部系统配置、注册全局组件、配置路由、路由守卫、注册全局指令、配置全局错误处理这些内容。
如何用ts搭建一个vue3通用项目底座 | 第四篇：utils函数
pasco152的博客
09-02 756
前面三篇的源码在gitee上可以查看common-template，1.0.1版本是规范篇结束，1.0.2版本是vite配置篇结束，后面都是一些细节补充，各位可以根据自己需要阅读。
如何用ts搭建一个vue3通用项目底座 | 第二篇（1）：项目创建
pasco152的博客
08-23 252
上一篇装好了环境，接下来先创建一个基本项目。打包工具用的vite，语言用的ts，vue3还是得和ts放一起看着才舒服。
vite的vue3项目配置
weixin_44719499的博客
10-20 2578
在使用 Vite 进行项目开发时，可以通过配置文件或来自定义项目的构建和开发流程。
vue3 + vite + typescript 中，简单配置 vite.config.ts
前端
01-29 3884
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
创建vue3+ts项目
qq_48783694的博客
03-12 5817
在开发项目的时候，经常会用到svg矢量图，使用svg矢量图之后，页面上加载的不再是图片资源，很大的提升了页面性能，svg文件比img小很多，在项目中机会不占资源。安装依赖：https://www.npmjs.com/package/vite-plugin-mock。官网地址：https://element-plus.gitee.io/zh-CN/API接口统一管理：创建src/api/use/index.ts以及type.ts。官网：https://stylelint.bootcss.com/
使用Vite搭建vue3+TS项目
Yan9_9的博客
12-09 3684
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它具有快速的冷启动，不需要等待打包操作；并且官网说是下一代的前端构建工具。
vite(vue3+ts)项目初始化配置vite.config.ts文件
m0_61470934的博客
04-19 2301
如有问题在下方评论区询问，不定期回答。废话不多说直接上代码！
vue3 +ts 安装并封装axios
热门推荐
weixin_59916662的博客
10-16 2万+
vue3 +ts 安装，封装，使用axios
vite vue3 ts配置
lichaoqun678的博客
02-21 660
ps:如果在ts文件中导入js报错需配置tsconfig.json。在src目录下新建router目录,并新建index.js文件。在main.ts文件中把router挂载上去。2、在vite.config.ts中导入。3、在tsconfig.json中添加。最后在app.vue中使用。1、安装path插件。
从0到1搭建vue3项目，完成vite.config.ts配置，集成router，pinia，axios，sass等
Hza_1031的博客
02-27 1898
在vue项目文件中src下新增一个router的文件夹,里面包含两个文件,index.ts和router.tsindex.ts文件// 项目中定义的路由对象})router.ts// 在这个文件中定义所以的路由对象,并将其导出meta: {title: "首页", // 菜单标题hidden: true, // 在左侧菜单中是否隐藏 true： 隐藏 false：显示icon: "",},},meta: {title: "关于", // 菜单标题。
Vite与Vue3结合TypeScript的项目基础搭建
Vite+vue3+ts 项目初始化底座是指使用Vite作为开发服务器和构建工具，Vue 3作为前端框架，TypeScript作为编程语言的前端项目的基础结构搭建。这一组合已经成为现代前端开发中非常流行的堆栈选择，因为它提供了快速的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值