AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vite+typescript从入门到实战(二）

2024-04-16 85
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vite+typescript从入门到实战

vite+typescript从入门到实战(一)：https://developer.aliyun.com/article/1483566


设置默认打开的浏览器


设置server.open默认打开的浏览器

/**
 * 设置server.open默认打开的浏览器
 * npm i open -D
 */
const open = require('open');
process.env.BROWSER = open.apps.chrome

gzip 压缩配置

/**
 * gzip 压缩配置
 * npm i vite-plugin-compression -D
 */
import viteCompression from 'vite-plugin-compression'
const viteCompressionOptions = {
    filter: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, // 需要压缩的文件
    threshold: 1024, // 文件容量大于这个值进行压缩
    algorithm: 'gzip', // 压缩方式
    ext: 'gz', // 后缀名
    deleteOriginFile: true, // 压缩后是否删除压缩源文件
}

使用mockjs

/**
 * mockjs
 * yarn add -D cross-env vite-plugin-mock
 * yarn add  mockjsD
 */
import { viteMockServe } from 'vite-plugin-mock';
// let prodMock = true;
// const viteMockServeOptions = {
//     mockPath: 'mock',
//     supportTs: false,
//     ignore: undefined,
//     watchFiles: true,
//     localEnabled: command === 'serve',
//     prodEnabled: command !== 'serve' && prodMock,
//     injectCode: `
//     import { setupProdMockServer } from '../mockProdServer';
//     setupProdMockServer();
//   `, // prodEnabled=true生效 main.{ts,js}
//     injectFile: '', // default: path.resolve(process.cwd(),'src/main.{ts,js}')
//     configPath: '', //default: vite.mock.config.ts
//     logger: true, //请求是输入日子
// }

/**
 * yarn add vite-plugin-mock-server
 */
// import mockServer from 'vite-plugin-mock-server'
// vite-plugin-mock-server
// options.plugins.push(mockServer({
//     logLevel: 'info',
//     urlPrefixes: ['/api/'],
//     mockRootDir: './mock',
//     mockJsSuffix: '.mock.js',
//     mockTsSuffix: '.mock.ts',
//     noHandlerResponse404: true,
//     mockModules: []
// }))

完整配置项参数

/**
 * import.meta.env.VITE_x 在.env[mode]中定义的变量不能访问到要用 loadEnv函数代替
 * 
 * 
 * https://github.com/vitejs/awesome-vite#plugins
 */
import { defineConfig, loadEnv } from 'vite'

/**
 * vue 整合插件
 * npm i @vitejs/plugin-vue -D
 */
import vue from '@vitejs/plugin-vue'
const url = require('url')
let parseURL = url.parse('http://user:pass@host.com:8080/p/a/t/h?name=zhangsan&age=12#hash', true, true)

// 解析路径
const path = require('path')

/**
 * 设置server.open默认打开的浏览器
 * npm i open -D
 */
const open = require('open');
process.env.BROWSER = open.apps.chrome


/**
 * gzip 压缩配置
 * npm i vite-plugin-compression -D
 */
import viteCompression from 'vite-plugin-compression'
const viteCompressionOptions = {
    filter: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, // 需要压缩的文件
    threshold: 1024, // 文件容量大于这个值进行压缩
    algorithm: 'gzip', // 压缩方式
    ext: 'gz', // 后缀名
    deleteOriginFile: true, // 压缩后是否删除压缩源文件
}

/**
 * mockjs
 * yarn add -D cross-env vite-plugin-mock
 * yarn add  mockjsD
 */
import { viteMockServe } from 'vite-plugin-mock';
// let prodMock = true;
// const viteMockServeOptions = {
//     mockPath: 'mock',
//     supportTs: false,
//     ignore: undefined,
//     watchFiles: true,
//     localEnabled: command === 'serve',
//     prodEnabled: command !== 'serve' && prodMock,
//     injectCode: `
//     import { setupProdMockServer } from '../mockProdServer';
//     setupProdMockServer();
//   `, // prodEnabled=true生效 main.{ts,js}
//     injectFile: '', // default: path.resolve(process.cwd(),'src/main.{ts,js}')
//     configPath: '', //default: vite.mock.config.ts
//     logger: true, //请求是输入日子
// }

/**
 * yarn add vite-plugin-mock-server
 */
// import mockServer from 'vite-plugin-mock-server'
// vite-plugin-mock-server
// options.plugins.push(mockServer({
//     logLevel: 'info',
//     urlPrefixes: ['/api/'],
//     mockRootDir: './mock',
//     mockJsSuffix: '.mock.js',
//     mockTsSuffix: '.mock.ts',
//     noHandlerResponse404: true,
//     mockModules: []
// }))

// export default ({ command, mode }) => {
//     console.log(command, mode);
export default defineConfig(({ command, mode }) => {
        let options = {
            root: process.cwd(), //项目根目录（index.html 文件所在的位置
            base: '/', //开发或生产环境服务的公共基础路径
            // mode:'development' 'production'
            define: { // 定义全局常量，======待研究怎么用======
                __PBR_APP_VERSION__: '1.0'
            },
            plugins: [vue()], // 需要用到的插件数组
            publicDir: 'public', // 静态资源文件夹，默认访问路径‘/’, 构建是会放在outDir根目录
            cacheDir: 'node_modules/.vite', // vite缓存文件目录，--force可以强制重新缓存
            resolve: {
                alias: { // 别名
                    '@': path.resolve(__dirname, './src'),
                    'comps': path.resolve(__dirname, './src/components'),
                    'utils': path.resolve(__dirname, './src/utils'),
                    'views': path.resolve(__dirname, './src/views'),
                    'apis': path.resolve(__dirname, './src/apis')
                },
                dedupe: [], // 强制将相同依赖解析为同一副本， ======待研究怎么用======
                //package.json 相关 开
                conditions: [], // 场景条件， ======待研究怎么用======
                mainFields: ['module', 'jsnext:main', 'jsnext'], // 入口点字段列表
                //package.json 相关 关
                extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], //导入时想要省略的扩展名列表
            },
            CSS: {
                // modules:'',
                // postcss: '',
                // preprocessorOptions: {},
            },
            JSON: {
                namedExports: true, // 是否支持从 .json 文件中进行按名导入
                stringify: false, // 若设置为 true,性能好，单不支持按名导入
            },
            esbuild: {}, // esbuild配置项，false为关闭esbuild
            assetsInclude: '', //指定其他静态文件
            logLevel: 'info', // 控制台输出级别，默认info，'info' | 'warn' | 'error' | 'silent'
            clearScreen: true, // 清屏， --clearScreen false
            envDir: './', //默认 root
            server: {
                host: '0.0.0.0',
                port: 9999, // 端口，若端口被占用时，自动尝试下一个端口
                strictPort: true, // 若端口被占用时直接退出
                https: false, // 启用 TLS + HTTP/2 配置，注意：当 server.proxy 选项 也被使用时，将会仅使用 TLS。false则关闭
                open: '/', // 项目启动时自动打开浏览器，可以设置默认打开的路径
                proxy: { // 服务器代理 https://github.com/http-party/node-http-proxy#options
                    '/foo': 'http://localhost:4567/foo',
                    '/apidd': {
                        target: loadEnv(mode, process.cwd()).VITE_APP_SERVER_URL,
                        changeOrigin: true,
                        rewrite: (path) => path.replace(/^\/api/, ''),
                        configure: (proxy, options) => {
                            // proxy 是 'http-proxy' 的实例
                        },
                    },
                    '^/fallback/.*': { // 正则
                        target: loadEnv(mode, process.cwd()).VITE_APP_SERVER_FALLBACK_URL,
                        changeOrigin: true,
                        rewrite: (path) => path.replace(/^\/fallback/, '')
                    },
                },
                cors: true, // 跨域，默认允许任何源 或 {origin: 'http://example.com',optionsSuccessStatus: 200}
                force: false, // 强制依赖预构建
                hmr: true, //禁用或配置 HMR 连接
                /**
                 * { 
                 *    protocol?: string, 
                 *    host?: string, 
                 *    port?: number, 
                 *    path?: string, 
                 *    timeout?: number, 
                 *    overlay?: boolean, // 屏蔽开发服务器错误提示
                 *    clientPort?: number, 
                 *    server?: Server 
                 * }
                 */
                watch: {}, //传递给 chokidar 的文件系统监听器选项 ， ======待研究怎么用======
                // middlewareMode: 'html', // https://cn.vitejs.dev/guide/ssr.html#setting-up-the-dev-server  ======待研究怎么用======
                /**
                 * 以中间件模式创建 Vite 服务器。（不含 HTTP 服务器）
                 * 'ssr' 将禁用 Vite 自身的 HTML 服务逻辑，因此你应该手动为 index.html 提供服务。
                 * 'html' 将启用 Vite 自身的 HTML 服务逻辑。
                 */
            },
            build: { // 构建
                target: 'modules', // 构建目标格式，默认是modules，也可以是esbuild配置项，https://esbuild.github.io/api/#target
                outDir: 'dist', // 构建输出路径
                assetsDir: 'assets', //静态资源文件夹，和outDir同级
                assetsInlineLimit: 4096, // kb, 小于此值将内联base64格式
                cssCodeSplit: true, // 运行css文件按chunk拆分，chunk加载时插入，如果false则所有的样式导出为一个css文件
                sourcemap: false, // map文件
                /*
                 * true，将会创建一个独立的 source map 文件
                 * 'inline'，source map 将作为一个 data URI 附加在输出文件中
                 * 'hidden' 的工作原理与 'true' 相似，只是 bundle 文件中相应的注释将不被保留。
                 */
                rollupOptions: {}, // rollup打包选项 https://rollupjs.org/guide/en/#big-list-of-options
                commonjsOptions: {}, // @rollup/plugin-commonjs 插件的选项
                dynamicImportVarsOptions: {}, // @rollup/plugin-dynamic-import-vars 的选项
                // lib: {}, // 构建为库,https://cn.vitejs.dev/guide/build.html#library-mode
                /**
                 * entry 是必须的因为库不能使用 HTML 作为入口。
                 * name 则是暴露的全局变量，在 formats 包含 'umd' 或 'iife' 时是必须的。
                 * 默认 formats 是 ['es', 'umd'] 。
                 * fileName 是输出的包文件名，默认 fileName 是 package.json 的 name 选项，同时，它还可以被定义为参数为 format 的函数。
                 */
                manifest: false, // 后端集成， ======待研究怎么用======
                minify: 'terser', // 最小化混淆，默认terser，可以是esbuild，或false关闭
                TerserOptions: {}, // terser混淆配置项
                cleanCssOptions: {}, // clean css 配置项， ======待研究怎么用======
                write: true, // 是否允许构建写入磁盘，false一般用在对构建做进一步处理
                emptyOutDir: true, // 构建前清库outDir目录
                brotliSize: true, //启用/禁用 brotli 压缩大小报告, 大型项目禁用可能提高构建速度
                chunkSizeWarningLimit: 500, //chunk 大小警告的限制（以 kbs 为单位
                watch: {}, // watchoptions,https://rollupjs.org/guide/en/#watch-options, 设置为 {} 则会启用 rollup 的监听器,代码改变时自动打包
            },
            optimizeDeps: { // 依赖优化
                // entries, '' | [], // 预构建入口
                // exclude: [], // 预构建排查的依赖
                // include: [], // 不在 node_modules 中的依赖包预构建
                // keepNames:false, //打包器有时需要重命名符号以避免冲突
            },
            ssr: { // 试验型，没做研究
                // external: [], //强制外部化的依赖
                // noExternal: '', // 防止外部化的依赖
                // target:'node', // SSR 服务器的构建目标
            }
        }
        if (command === 'serve') {
            // dev & serve

            //vite-plugin-mock
            let prodMock = true;
            const viteMockServeOptions = {
                mockPath: 'mock',
                supportTs: false,
                ignore: undefined,
                watchFiles: true,
                localEnabled: command === 'serve',
                prodEnabled: command !== 'serve' && prodMock,
                injectCode: ``, // prodEnabled=true生效 main.{ts,js}
                injectFile: '', // default: path.resolve(process.cwd(),'src/main.{ts,js}')
                configPath: '', //default: vite.mock.config.ts
                logger: true, //请求是输入日子
            }
            options.plugins.push(viteMockServe(viteMockServeOptions))
            console.log('mock')
        } else {
            // build
            options.plugins.push(viteCompression(viteCompressionOptions))
        }
        return options
    })
    // }


/**
 * jsdoc 方式智能提示
 * @type {import('vite').UserConfig}
 */
export const config = {
    server: {

    }
}

loadEnv 函数(使用.env文件)

import { loadEnv } from 'vite';

loadEnv('development', process.cwd());

检查process.cwd()路径下.env.development.local、.env.development、.env.local、.env这四个环境文件。
输出NODE_ENV和VITE_开头的键值对。
VITE_开头的键值对后面的不会覆盖前面的。
NODE_ENV的值后面的会覆盖前面的。


项目目录下创建.env.development .dev.production文件

NODE_ENV = 'development'
VITE_APP_BASE_API = '/api' // 暴露必须以VITE开头才能被Vite识别

项目使用

import.meta.env.XXXX
if (process.env.NODE_ENV === 'development') {
  BASE_URL = `${import.meta.env.VITE_APP_BASE_API}`
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = `${import.meta.env.VITE_APP_BASE_API}`
} else {
  BASE_URL = `${import.meta.env.VITE_APP_BASE_API}`
}

Vite.config 使用

import { defineConfig, loadEnv } from 'vite'
export default ({ mode }) => {
  return defineConfig({
    server: {
      proxy: {
            [`${loadEnv(mode, process.cwd()).VITE_APP_BASE_API}`]: {
                target: loadEnv(mode, process.cwd()).VITE_TEST_HOST, // 线上
                // rewrite: (path:any) => path.replace(/^\/api/, ''),
                changeOrigin: true,
                ws: true
            }
          }
    }
  })
}
import * as dotenv from "dotenv"
export interface ViteEnv {
    VITE_URL: string;
    VITE_BASE_URL: string;
    VITE_ZIP_NAME: string;
}

// 通过dotenv配置 需要加载指定.env文件 这样process.env打印到得就是对应得文件了 
// 这里的mode是我们启动时候的参数 npm run dev:prc 得到的mode就是prc
export function loadEnv(mode: string): ViteEnv {
    const ret: any = {};
    // 在使用之前我们先指定加载哪个环境变量 
    dotenv.config({
        path: `.env.${mode}` // .env.prc
    });
    
    for (const envName of Object.keys(process.env)) {
        let realName = (process.env as any)[envName].replace(/\\n/g, "\n");
        ret[envName] = realName;
        // 向process.env上扩展我们定义的VITE环境变量
        process.env[envName] = realName;
    }
    return ret
}
const regExps = (value: string, reg: string): string => {
    return value.replace(new RegExp(reg, "g"), "");
};

//   根据环境变量返回指定得proxy
export function createProxy(targetProxyUrl:string,baseUrl:string) {
    return {
        [`${baseUrl}`]: {
            target: targetProxyUrl,
            changeOrigin: true,
            rewrite: (path: string) => regExps(path,`${baseUrl}`)
        },
    }
}
# mode是在这里拿到的
export default ({ command, mode }) => {}

import { loadEnv, createProxy } from "./src/utils/load-env"

const { VITE_URL, VITE_BASE_URL, VITE_ZIP_NAME } = loadEnv(mode)
# proxy部分
 serve: {
      port: 8999,
      proxy: createProxy(VITE_URL, VITE_BASE_URL)
 }

在其他地方使用 request.ts

在request.ts中我们可以通过 import.meta.env 拿到我们在环境变量文件中的定义的Vite变量

这样在配置axios的时候。

const baseURL = (import.meta.env.VITE_BASE_URL as string)
const service: AxiosInstance = axios.create({
  baseURL,
  timeout: 30 * 1000,
});

viteBuild.ts 文件

//位置 @/utils/viteBuild.ts

import dotenv from 'dotenv';

// 定义接口类型声明
export interface ViteEnv {
  VITE_PORT: number;
  VITE_OPEN: boolean;
  VITE_PUBLIC_PATH: string;
}

/**
 * vite 打包相关
 * @link 参考：https://cn.vitejs.dev/guide/env-and-mode.html
 * @returns 返回 `VITE_xxx` 环境变量和模式信息
 */
export function loadEnv(): ViteEnv {
  const env = process.env.NODE_ENV;
  const ret: any = {};
  const envList = [`.env.${env}.local`, `.env.${env}`, '.env.local', '.env'];
  envList.forEach((e) => {
    dotenv.config({ path: e });
  });
  for (const envName of Object.keys(process.env)) {
    let realName = (process.env as any)[envName].replace(/\\n/g, '\n');
    realName = realName === 'true' ? true : realName === 'false' ? false : realName;
    if (envName === 'VITE_PORT') realName = Number(realName);
    if (envName === 'VITE_OPEN') realName = Boolean(realName);
    ret[envName] = realName;
    process.env[envName] = realName;
  }
  return ret;
}

使用

import { loadEnv } from './src/utils/viteBuild';

const { VITE_PORT, VITE_OPEN, VITE_PUBLIC_PATH } = loadEnv();

process.cwd()


process.cwd()方法是流程模块的内置应用程序编程接口，用于获取node.js流程的当前工作目录。


vite中引入预处理全局scss文件(全局样式)

cssPreprocessOptions: {
    scss: {
      additionalData: '@import "./src/assets/scss/all.scss";' // 添加公共样式
    }
  }


vite+typescript从入门到实战（三）：https://developer.aliyun.com/article/1483578

文章标签：
JavaScript
关键词：
TypeScript实战
TypeScript入门
vite TypeScript入门
微芒不朽
目录
相关文章
土木林森
|
24天前
|
JavaScript 数据管理 编译器
揭秘 ArkTS 与 TypeScript 的神秘差异：鸿蒙系统开发者的必备知识与实战技巧
【10月更文挑战第18天】ArkTS 是华为为鸿蒙系统（HarmonyOS）推出的开发语言，作为 TypeScript 的超集，它针对鸿蒙系统的分布式特性和需求进行了优化和扩展。ArkTS 强化了分布式数据管理、类型系统、编译与运行时性能，并支持声明式 UI 和专为鸿蒙设计的 API，使开发者能够更高效地开发跨设备协同工作的应用。
土木林森
61 6
游客62mqllx53nctc
|
1月前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript？
【10月更文挑战第1天】浏览器如何识别Typescript？
游客62mqllx53nctc
55 3
周一同学Zelina
|
2月前
|
JavaScript 前端开发 编译器
TypeScript，从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南，从安装配置到基础语法，再到高级特性如泛型、接口等的使用，帮助初学者快速掌握TypeScript的基本用法。
周一同学Zelina
24 0
数据知道
|
2月前
|
JavaScript 前端开发 编译器
三个小时vue3.x从零到实战（typescript的搭建、使用及资料）
该文章介绍了如何在Vue 3项目中集成TypeScript，包括TypeScript的安装、基本使用，以及如何通过TypeScript增强Vue应用程序的类型安全性。
数据知道
37 0
风吹落叶花飘荡
|
3月前
|
资源调度 JavaScript 前端开发
TypeScript实战教程（一）：表单上传与后端处理
本文是TypeScript实战教程的第一部分，介绍了使用TypeScript进行表单上传和后端处理的完整流程，包括环境配置、前端表单创建、使用TypeScript和Express框架搭建服务端、处理表单数据，并提供了详细的代码示例和运行测试方法。
风吹落叶花飘荡
66 0
TypeScript实战教程（一）：表单上传与后端处理
1313310884104708
|
3月前
|
JavaScript 前端开发 安全
立等可取的 Vue + Typescript 函数式组件实战
立等可取的 Vue + Typescript 函数式组件实战
1313310884104708
27 0
向宇it
|
5月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
向宇it
30 0
白雾茫茫丶
|
6月前
|
JavaScript
Nuxt3 实战 (四)：安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus，但最终选择了NuxtUI，因为它更适合年轻化的项目，并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令，同时会自动安装一些相关模块。然后，可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外，还介绍了如何添加图标库和配置TypeScript。
白雾茫茫丶
149 0
Nuxt3 实战 (四)：安装 Nuxt UI 和配置 Typescript 类型检查
微芒不朽
|
6月前
|
JavaScript
vite+typescript从入门到实战(三）
vite+typescript从入门到实战
微芒不朽
97 0
微芒不朽
|
6月前
|
JavaScript 前端开发
vite+typescript从入门到实战(一）
vite+typescript从入门到实战
微芒不朽
129 0

热门文章

最新文章

  • 1
    TypeScript 函数
  • 2
    攀爬TS之路(六) 类型别名、字面量类型、枚举
  • 3
    TypeScript 泛型
  • 4
    nodejs 不支持 typescript （...paramName:any[]）剩余参数。变相支持方式。
  • 5
    推荐 7 个学习 TypeScript 的宝库，2021 学 TS 看这篇就够了！
  • 6
    TypeScript的概要和简介
  • 7
    TypeScript 真香，说说它的优缺点
  • 8
    TypeScript-类装饰器和TypeScript-defineProperty
  • 9
    TypeScript入门之数据类型
  • 10
    前端学习案例-react18+ts+redux实战1-rudux-tookit
  • 1
    TypeScript 迁移
    17
  • 2
    如何学习typescript？
    35
  • 3
    TypeScript接口与类型别名：深入解析与应用实践
    68
  • 4
    React 项目中有效地使用 TypeScript
    42
  • 5
    React 和 TypeScript
    118
  • 6
    TypeScript取代JavaScript的优势
    65
  • 7
    Typescript 【实用教程】（2024最新版）含类型声明，类型断言，函数，接口，泛型等
    79
  • 8
    TypeScript的介绍,let age:number = xxx，可以直接看出数据类型，Type由微软开发，可以在任何浏览器和系统中运行，比较适合大型项目,TypeScript的安装
    55
  • 9
    node，npm汇总，pip汇总，typeScript的使用，mybatis,sass的使用中文官网地址：
    38
  • 10
    TypeScript（十六）配置相关（tsconfig配置）
    86

    • 相关课程

    更多
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • React 入门与实战
  • JavaScript入门与实战
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 现代TypeScript高级教程
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 对象和接口-1：对象类型
  • 函数类型-1：基本语法
  • 常见类型-1：空，联合，枚举
  • 常见类型-2：数组和元组
  • 语言入门-2：基本类型
  • 语言入门-1：环境构建
    • 下一篇
    阿里云OSS设置跨域访问