vite使用（个人总结）

hang_bro
364 阅读2分钟
初始化项目,生成package.json文件
yarn init
安装vite依赖
yarn add vite -D
在当前目录下创建src文件夹，在进入文件夹创建main.ts
在当前目录下创建index.html文件 script标签的type设置为module
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 设置页面不缓存 -->
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-control" content="no-cache" />
    <meta http-equiv="Cache" content="no-cache" />
    <title>hang</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

因为我是用ts 所以要安装typescript

yarn add typescript -D
生成tsconfig.json
npx tsc init

生成的文件删减之后如下

{
  "compilerOptions": {
    "types": ["element-plus/global"],
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
我使用的是vue框架ui框架使用Element Plus
yarn add element-plus vue
下载Element Plus的自动引入插件
yarn add unplugin-auto-import -D
yarn add unplugin-vue-components -D
css框架我选择sass，安装sass
yarn add sass
在src目录下新建App.vue
<!--
 * @Description: 
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2022-07-18 17:15:35
-->
<script lang="ts" setup>
import { Edit } from '@element-plus/icons-vue'
const handleClik = () => console.log('click')
</script>
<template>
  <div>
    <button @click="handleClik" type="primary" :icon="Edit" circle />
  </div>
</template>

<style lang="scss" scoped></style>

创建shims-vue.d.ts声明文件

/*
 * @Description:
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2022-07-18 15:53:22
 */
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

declare module 'vite'
declare module '*.json' {
  const value: any
  export default value
}
declare module '*.avif' {
  const src: string
  export default src
}

declare module '*.bmp' {
  const src: string
  export default src
}

declare module '*.gif' {
  const src: string
  export default src
}

declare module '*.jpg' {
  const src: string
  export default src
}

declare module '*.jpeg' {
  const src: string
  export default src
}

declare module '*.png' {
  const src: string
  export default src
}

declare module '*.webp' {
  const src: string
  export default src
}
在package.son文件中设置脚本 “scripts”
 "scripts": {
    "dev": "vite --mode dev",
    "test": "vite --mode test",
    "build:production": "vite build",
    "build:test": "vite build --mode test",
    "preview": "vite preview"
  }

考虑到实际项目开发场景，需要用到 开发，测试，线上 3中不同的环境，按照vite官网的步骤分别创建3个 .env文件

.env.test
.env.dev
.env.production

里面分别写上对应的地址 如: **VITE_BASE_URL=http://127.0.0.1:2334 ** ,注意，必须以”VITE_“开头

vite.config.ts

/*
 * @Description:vite 配置文件
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2022-07-18 17:31:28
 */
import { defineConfig, loadEnv } from 'vite'
import { resolve } from 'path'
/**
 * 根据项目所用框架 安装插件，并注册到 plugin里面去
 */
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
/**
 * 压缩 gzip
 */
import viteCompression from 'vite-plugin-compression'
export default defineConfig(({ mode }) => {
  /**根据 "mode" 值 读取获取本地环境变量中的.env.[mode]中VITE_BASE_URL的值 */
  const baseUrl = loadEnv(mode, process.cwd()).VITE_BASE_URL
  console.log(mode, baseUrl)

  return {
    /**
     * 插件
     */
    plugins: [
      vue(),
      // 压缩
      // viteCompression({
      //   verbose: true,
      //   disable: false,
      //   threshold: 10240,
      //   algorithm: 'gzip',
      //   ext: '.gz'
      // }),
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ],
    resolve: {
      /**
       * 配置别名
       */
      alias: {
        '@': resolve(__dirname, './src')
      }
    },
    /**
     * 服务器设置
     */
    server: {
      /**代理 */
      proxy: {
        '/api': {
          target: baseUrl,
          ws: true,
          changeOrigin: true, //换源
          rewrite: path => path.replace(/^\/api/, '') // 将 "/api"替换成""
        }
      }
    },
    /**
     * 打包配置
     */
    build: {
      /**
       * 指定构建目标，最低支持 es2015
       */
      target: 'es2015',
      /**打包选项 */
      rollupOptions: {
        /**输出 */
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        }
      }
    }
  }
})
avatar
文章
阅读
粉丝