vite vue3 项目配置记录

vitevue3vue

2024-03-07 09:24:25

vite vue3 项目配置记录

参考文档 https://cn.vitejs.dev/guide/

基础配置

JavaScript 复制代码

export default defineConfig({
   base:"", // 配置css、js等资源为相对目录
  //... 配置卸载这里
  define: {},
  plugins: []
})

define

做一些文本替换的功能，在vue3中常见的是关闭options选项，以便打包之后缩小体积

JavaScript 复制代码

define: {
    __VUE_OPTIONS_API__: false,
    __VUE_PROD_DEVTOOLS__: false,
  },

plugins

配置一些插件，也是vite最核心的部分

1. vue 插件

JavaScript 复制代码

import vue from '@vitejs/plugin-vue';
//...
plugins: [
  vue(),
]
//...

2. vueJsx 插件

JavaScript 复制代码

import vueJsx from '@vitejs/plugin-vue-jsx';
//...
plugins: [
  vueJsx(),
]
//...

3. 自动导入第三方包插件

可以自动导入vue、antd-design-vue、element-plus、自定义组件，等。简化代码、少些代码必备

JavaScript 复制代码

import AutoImport from "unplugin-auto-import/vite"
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers' // 自动注入 antd-design-vue
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' 自动注入 ElementPlus

//...
plugins: [
  AutoImport({
    imports: ["vue"],
    dts: "./auto-import.d.ts", // 指定类型位置，不知道则不会生成类型注解
  }),
  Components({
    resolvers: [AntDesignVueResolver()]
  }),
]
//...

4. css 注入js代码当中

一般在自制一些第三方库的时候用到

JavaScript 复制代码

import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
//...
plugins: [
    cssInjectedByJsPlugin(),
]
//...

5. 生成d.ts文件

专为lib模式打造的，生成dts文件神器

JavaScript 复制代码

import dts from 'vite-plugin-dts'
//...
plugins: [
    dts(),
]
//...

6.cdn
这种方式仅支持esm方式，commonjs参考：https://blog.csdn.net/m0_68324632/article/details/126828350

JavaScript 复制代码

rollupOptions: {
      external: [
        "vue",
        "axios",
        "echarts",
      ],
      output: {
        paths: {
          vue: 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js',
          axios: 'https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/esm/axios.js',
          echarts: 'https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.esm.min.js',
        },
      }
}

7. 打包分析

JavaScript 复制代码

import { visualizer } from 'rollup-plugin-visualizer';

plugins: [
  visualizer({
      emitFile: false,
      filename: 'analysis-chart.html', // 分析图生成的文件名
      open:true // 如果存在本地服务端口，将在打包后自动展示
    }),
]

8.index.html文件注入变量

ts 复制代码

import { createHtmlPlugin } from 'vite-plugin-html';

export default ({ mode }: ConfigEnv): UserConfig => {
    // 根据当前工作目录中的 `mode` 加载 .env 文件
	// 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
	const env = loadEnv(mode, process.cwd(), 'VITE_')
    return {
        plugins: [
          createHtmlPlugin({
            inject: {
             data: {
               ...env
             },
            },
          }),
		],
    }
    
}

html 复制代码

<div class="preload__footer">
    <div> Copyright <%- VITE_APP_COPYRIGHT %> <%- VITE_APP_COMPANY_NAME %> </div>
    <div> 最后更新日期：<%- VITE_APP_SYSTEM_UPDATE_DATE %> 版本：<%- VITE_APP_VERSION %></div>
</div>

打包选项

复制代码

build: {
    lib: { // lib 选项是打包为库的时候才需要，一般项目不需要
        entry: pathResolve(`../src/${name}/index`), // 入口路径，nane自定义
        name: 'howuse',// 库名称，对应下面的format值
        fileName: (format) => `${name}.${format}.js`,
        formats: ['es', "cjs"], // 打包输出哪些模块类型格式
    },
    target: 'modules', // 默认的值，模块方式使用
    outDir: 'dist', //指定输出路径
    assetsDir: 'static', // 指定生成静态资源的存放路径
    rollupOptions: {
      external: ["prismjs"] // 排除某些包，不打包在内。可以是正则、回调函数
    }
  },

css 选项

JavaScript 复制代码

css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true, // 启动才可正确在js当中导入
        modifyVars: { // 设置一些全局变量
          namespace: "howuse",
          defaultZIndex: 1000,
        },
      }
    }
  },

服务和反向代理配置

JavaScript 复制代码

// 本地运行配置，及反向代理配置
  server: {
    cors: true, // 默认启用并允许任何源
    // open: true, // 在服务器启动时自动在浏览器中打开应用程序
    proxy: {
      '/api': {
        target: 'http://192.168.0.2:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }