项目代码同步至码云 weiz-vue3-template
关于vite的详细配置可查看 vite官方文档，本文简单介绍vite的常用配置。
初始内容
项目初建后，vite.config.ts 的默认内容如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],})
配置别名
1. 安装 @types/node
npm i @types/node -D
2. 修改 vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// 路径查找
const pathResolve = (dir: string): string => {
return resolve(__dirname,".",dir);
};
// 设置别名，还可以添加其他路径
const alias: Record<string,string> = {
"@": pathResolve("src"),"@views": pathResolve("src/views"),"@store": pathResolve("src/store")
};
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],resolve: {
alias
},})
3. 使用
比如，修改 App.vue:
import HelloWorld from '@/components/HelloWorld.vue'
配置环境变量
1. 新建env文件
根目录下新建 .env、.env.development、.env.production 三个文件。.env 文件内新增内容：
# 本地运行端口号
VITE_PORT = 8686
.env.development 文件内新增内容：
# 本地环境
VITE_USER_NODE_ENV = development
# 公共基础路径
VITE_PUBLIC_PATH = /
.env.production 文件内新增内容：
# 线上环境
VITE_USER_NODE_ENV = production
# 公共基础路径
VITE_PUBLIC_PATH = /
2. 环境变量统一处理
根目录下新建 build 文件夹，其目录下新建 index.ts，内容如下：
// 环境变量处理方法
export function wrapperEnv(envConf: Recordable): ViteEnv {
const ret: any = {};
for (const envName of Object.keys(envConf)) {
let realName = envConf[envName].replace(/\\n/g,"\n");
realName = realName === "true" ? true : realName === "false" ? false : realName;
if (envName === "VITE_PORT") realName = Number(realName);
ret[envName] = realName;
if (typeof realName === "string") {
process.env[envName] = realName;
} else if (typeof realName === "object") {
process.env[envName] = JSON.stringify(realName);
}
}
return ret;
}
3. 环境类型定义
在 types\index.d.ts 文件里新增对 Recordable 和 ViteEnv 的类型定义：
type Recordable<T = any> = Record<string,T>;
interface ViteEnv {
VITE_USER_NODE_ENV: "development" | "production";
VITE_PUBLIC_PATH: string;
VITE_PORT: number;
}
修改 tsconfig.json 文件，将 build 文件夹内的文件包含进去：
"include": [ // 需要检测的文件
"src/**/*.ts","build/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","mock/*.ts","types/*.d.ts","vite.config.ts"
],同理，修改 tsconfig.node.json 文件：
"include": [
"build/*.ts","vite.config.ts"
]
4. 使用
修改 vite.config.ts：
import { defineConfig,loadEnv,ConfigEnv,UserConfig } from "vite"
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { wrapperEnv } from './build'
// 路径查找
const pathResolve = (dir: string): string => {
return resolve(__dirname,"@store": pathResolve("src/store")
};
// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
const root = process.cwd()
const env = loadEnv(mode,root)
const viteEnv = wrapperEnv(env)
return {
base: viteEnv.VITE_PUBLIC_PATH,plugins: [vue()],resolve: {
alias
},server: {
host: "0.0.0.0",port: viteEnv.VITE_PORT,https: false,open: true,// 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
proxy: {
"^/api": {
target: "http://192.168.1.4:8688",changeOrigin: true,rewrite: path => path.replace(/^\/api/,"")
}
}
},}
})
目录更新
当前项目目录如下：
| .env
| .env.development
| .env.production
| .gitignore
| index.html
| package-lock.json
| package.json
| README.md
| tree.txt
| tsconfig.json
| tsconfig.node.json
| vite.config.ts
|
+---.vscode
| extensions.json
|
+---build
| index.ts
|
+---node_modules
+---public
| vite.svg
|
+---src
| | App.vue
| | main.ts
| | style.css
| | vite-env.d.ts
| |
| +---assets
| | vue.svg
| |
| \---components
| HelloWorld.vue
|
\---types
index.d.ts
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。
