vite 创建 vue3 项目已经打包使用

原创

lenglingx 2024-08-12 14:21:40 博主文章分类：Vue ©著作权

©著作权归作者所有：来自51CTO博客作者lenglingx的原创作品，请联系作者获取转载授权，否则将追究法律责任

vitejs 官网：

https://cn.vitejs.dev/

另外的资源中文资源网站：https://vitejs.cn/，另一个 vitepress 文档和 https://vitejs.cn/vitepress/ https://vitepress.dev/

搭建第一个 Vite 项目

使用 NPM:
$ npm create vite@latest

使用 Yarn:
$ yarn create vite

使用 PNPM:
$ pnpm create vite

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts, vue, vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

`index.html` 与项目根目录 ¶

你可能已经注意到，在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

多页面应用模式 ¶

假设你有下面这样的项目文件结构

├── package.json
├── vite.config.js
├── index.html
├── main.js
└── nested
    ├── index.html
    └── nested.js

在开发过程中，简单地导航或链接到 /nested/ - 将会按预期工作，与正常的静态文件服务器表现一致。

在构建过程中，你只需指定多个 .html 文件作为入口点即可：

// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        nested: resolve(__dirname, 'nested/index.html'),
      },
    },
  },
})

库模式

当你开发面向浏览器的库时，你可能会将大部分时间花在该库的测试 / 演示页面上。在 Vite 中你可以使用 index.html 获得如丝般顺滑的开发体验。

当这个库要进行发布构建时，请使用 build.lib 配置项，以确保将那些你不想打包进库的依赖进行外部化处理，例如 vue 或 react：

// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib',
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

入口文件将包含可以由你的包的用户导入的导出：

// lib/main.js
import Foo from './Foo.vue'
import Bar from './Bar.vue'
export { Foo, Bar }

使用如上配置运行 vite build 时，将会使用一套面向库的 Rollup 预设，并且将为该库提供两种构建格式：es 和 umd (可在 build.lib 中配置)：

$ vite build
building for production...
dist/my-lib.js      0.08 KiB / gzip: 0.07 KiB
dist/my-lib.umd.cjs 0.30 KiB / gzip: 0.16 KiB

推荐在你库的 package.json 中使用如下格式：

{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  }
}

或者，如果暴露了多个入口起点：

{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.cjs"
    },
    "./secondary": {
      "import": "./dist/secondary.js",
      "require": "./dist/secondary.cjs"
    }
  }
}

命令行界面

在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

yarn vite ---> vite
yarn build ---> vite build
yarn preview ---> vite preview
yarn build --mode=testing ---> vite build --mode=testing
自带的 2 个环境：development，production
建议的 3 个环境：development，production，testing 或者其他标签。

.env.development

# just a flag
ENV='development'

VITE_APP_TITLE=CHANPUSHWEB(development)
VITE_APP_BASE_API='http://127.0.0.1:8850/'

.env.testing

# just a flag
ENV='testing'

VITE_APP_TITLE=CHANPUSHWEB(testing)
VITE_APP_BASE_API='http://symgateway.imddy.top/'

.env.production

# just a flag
ENV='production'

VITE_APP_TITLE=CHANPUSHWEB(production)
VITE_APP_BASE_API='http://symgateway.cqjson.com/'

环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

import.meta.env.MODE: {string} 应用运行的模式。

import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。

import.meta.env.PROD: {boolean} 应用是否运行在生产环境。

import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载，但会被 git 忽略

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

环境加载优先级
一份用于指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env）。
另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。

yarn add vue@next
yarn add vue-router@next
yarn add pinia
yarn add element-plus
yarn add @element-plus/icons-vue
yarn add axios
yarn add font-awesome
yarn add echarts 
yarn add mockjs 
yarn add qs 
yarn add xlsx 
yarn add file-saver 
yarn add dayjs 


yarn add @types/node -D
yarn add @vitejs/plugin-vue -D

npm install @types/node --save-dev 
npm install @vitejs/plugin-vue --save-dev

npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install less-loader --save-dev
npm install style-loader --save-dev

yarn add node-sass -D
yarn add sass-loader -D
yarn add less-loader -D
yarn add style-loader -D

我在另外一个地方写的博客，先发转发到这里，方便以后复制查看。