Vite 环境部署

Vite

开发环境

Vite项目初始化:

从零新建Vite项目

1. 使用npm运行npm create vite@latest, 创建Vite的文件结构
2. 为项目起名字
3. 选择Js框架
4. 选择纯js或ts环境
5. 切换到vite项目文件夹下
6. 运行npm i, 安装Vite依赖 部署完成后，默认有如下npm脚本：

"scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
}

开发环境实时预览

• 启动开发预览服务: npm run dev
  • 点击命令提示符中的网址, 就能看到项目的入口网站

构建生产环境的代码

• 编译出生产环境的代码：npm run build
• 预览构建出来的代码效果：npm run preview

为已有项目添加Vite工具

添加npm script 自定义命令：

"scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
}

配置typescript

child::Vite配置ts

目标环境为nodejs的配置

vite.config.ts配置文件如下：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import typescript from "@rollup/plugin-typescript";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
  
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, "src/main.ts"),
      name: "MyLib",
      // the proper extensions will be added
      fileName: "main",
      formats: ["cjs"],
    },
    cssCodeSplit: false,
    rollupOptions: {
      output: {
        dir: undefined,
        file: resolve(__dirname, "main.js"),
        sourcemap: "inline",
        sourcemapExcludeSources: true,
        format: "cjs",
        exports: "default",
        globals: {
          vue: "Vue",
        },
        assetFileNames: (chunkInfo) => {
          if (chunkInfo.name === "style.css") return "styles.css";
        },
      },
      external: [],
      plugins: [typescript(), nodeResolve({ browser: true }), commonjs()],
    },
  },
});

运行环境

为不同的运行环境使用不同的配置

child::

环境区分

child::

• vite使用不同的模式代表不同的运行环境

指向原始笔记的链接

child::

• 不同的模式使用不同的环境变量

指向原始笔记的链接

指向原始笔记的链接