vue3+vite简单打包配置

木玄客

已于 2022-11-21 09:37:24 修改

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：随笔 Vue学习笔记文章标签： vue.js javascript 前端

于 2022-11-21 09:33:50 首次发布

本文链接：https://blog.youkuaiyun.com/linchui22/article/details/127958146

随笔同时被 2 个专栏收录

18 篇文章

订阅专栏

Vue学习笔记

8 篇文章

订阅专栏

本文介绍了如何使用Vite进行Vue3项目的简单打包配置，包括vite.config.ts的设置和tsconfig.json的配置，适合前端开发者了解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  base: '/',
  publicDir: 'assets',
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        // 生产环境打包移除console
        drop_console: true,
        drop_debugger: true,
      }
    }
  },
  server: {
    host: 'localhost',
    cors: true,
    proxy: {
      '/api': {
        target: "http://xxxxx",
        changeOrigin: true
      }
    }
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, "./src")
    }
  }
})

tsconfig.json：

{
  "compilerOptions": {
    "allowJs": true,
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": false,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "noImplicitAny": true,
    "types": [
      "node"
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*",],
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}