【Vue工程】004-配置环境变量、端口、代理、打包等
文章目录
-
【Vue工程】004-配置环境变量、端口、代理、打包等
-
一、配置环境变量
-
1、说明
-
2、定义变量
-
3、定义变量 ts 类型
-
4、使用变量
-
1、开发环境 `.env.development`
-
2、测试环境 `.env.test`
-
3、生产环境 `.env.production`
一、配置环境变量
1、说明
.env(所有环境生效).env.development(开发环境配置) .env.production(生产环境配置)
**官方文档: **环境变量和模式 https://cn.vitejs.dev/guide/env-and-mode.html
2、定义变量
以 VITE_ 为前缀定义变量
VITE_BASE_URL = 'http//localhost:8080/api'
3、定义变量 ts 类型
修改 src/vite-env.d.ts
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_BASE_URL: string;
interface ImportMeta {
readonly env: ImportMetaEnv;
}
4、使用变量
import.meta.env.VITE_BASE_URL
二、环境变量配置案例
1、开发环境 .env.development
# 页面标题
VITE_APP_TITLE = 页面标题(development)
# 接口请求地址,会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = /
# 调试工具,可设置 eruda 或 vconsole,如果不需要开启则留空
VITE_APP_DEBUG_TOOL =
# 是否开启代理
VITE_OPEN_PROXY = true
2、测试环境 .env.test
NODE_ENV = production
# 页面标题
VITE_APP_TITLE = 页面标题(test)
# 接口请求地址,会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = /
# 调试工具,可设置 eruda 或 vconsole,如果不需要开启则留空
VITE_APP_DEBUG_TOOL =
# 是否在打包时启用 Mock
VITE_BUILD_MOCK = true
# 是否在打包时生成 sourcemap
VITE_BUILD_SOURCEMAP = true
# 是否在打包时开启压缩,支持 gzip 和 brotli
VITE_BUILD_COMPRESS =
3、生产环境 .env.production
NODE_ENV = production
# 页面标题
VITE_APP_TITLE = 页面标题
# 接口请求地址,会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = /
# 调试工具,可设置 eruda 或 vconsole,如果不需要开启则留空
VITE_APP_DEBUG_TOOL =
# 是否在打包时启用 Mock
VITE_BUILD_MOCK = false
# 是否在打包时生成 sourcemap
VITE_BUILD_SOURCEMAP = false
# 是否在打包时开启压缩,支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip,brotli
三、配置端口与代理
export default defineConfig({
server: {
host: '0.0.0.0',
port: 8080,
open: true,
https: false,
proxy: {
'/api': {
target: '要代理的地址',
changeOrigin: true,
ws: true,
rewrite: (path: string) => path.replace(/^\/api/, ''),
});
四、打包配置
修改vite.config.ts
1、分包
通过() => import()形式加载的组件会自动分包,第三方插件需手动分包
build: {
rollupOptions: {
output: {
manualChunks: {
vue: ['vue', 'pinia', 'vue-router'],
elementIcons: ['@element-plus/icons-vue'],
},
2、生成.gz文件
安装
pnpm add vite-plugin-compression -D
修改vite.config.ts
默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用,使用 apply 属性指明它们仅在 ‘build’ 或 ‘serve’ 模式时调用
这里打包生成 .gz 插件仅需在打包时使用
import viteCompression from 'vite-plugin-compression'
plugins: [
//...
...viteCompression(),
apply: 'build',
],
3、js 和 css 文件夹分离
export default defineConfig({
build: {
rollupOptions: {
output: {
chunkFileNames: "static/js/[name]-[hash].js",
entryFileNames: "static/js/[name]-[hash].js",
assetFileNames: "static/[ext]/[name]-[hash].[ext]",
});
五、vite与 webpack 使用区别
1、静态资源处理
webpack:使用require处理
vite:使用 new URL(url, import.meta.url).href 处理
import.meta.url 包含了对于目前 ES 模块的绝对路径
new URL(url [, base]) 构造函数返回一个新创建的 URL 对象,如果url 是相对 URL,则会将 base 用作基准 URL。如果 url 是绝对 URL,则无论参数base是否存在,都将被忽略
new URL('../assets/images/home.png', import.meta.url).href
// 在src/constants/menus.ts下引入图片
// import.meta.url返回 http://localhost:8080/src/constants/menus.ts
// new URL(...).href返回
// http://localhost:8080/src/assets/images/home.png
2、组件自动化注册
webpack
<script>
const path = require('path');
//读取@/components/BaseEchartsModel下所有.vue文件
const files = require.context('@/components/BaseEchartsModel', false, /\.vue$/);
const modules = {};
files.keys().forEach((key) => {
const name = path.basename(key, '.vue');
modules[name] = files(key).default || files(key);
export default {
name: 'BaseEcharts',
components: modules,
</script>
vite
<script setup lang="ts">
//读取@/components/BaseEchartsModel下所有.vue文件
import.meta.glob('@/components/BaseEchartsModel/*.vue');
</script>