用于配置某些文件夹的路径别名,如webpack中默认配置的'@'符号
jsimport { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { dirname } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
// 配置别名
resolve:{
alias: {
'@': resolve(__dirname,'src/'),
comps: resolve(__dirname,'src/components/'),
pages: resolve(__dirname,'src/pages/'),
utils: resolve(__dirname,'src/utils/'),
},
},
plugins: [vue()]
})
npm create vue@3
生成的项目
jsimport { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default ({mode,}) => {
/**
* 描述
* @date 用于加载自定义的env环境
* @param {any} 'mode': 模式,Vite启动时会自动传入启动时的指令中的参数
* @param {any} 'process.cwd()':返回Node.js进程的当前工作目录
* @returns {any} 环境变量
*/
const env = loadEnv(mode, process.cwd());
return defineConfig({
// 若是部署在二级目录,则基础路径需要更改;否则为'/'当前目录
base: env.VITE_APP_BASE || '/',
// 插件配置
plugins: [vue()],
// 路径解析
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'comps': fileURLToPath(new URL('./src/components', import.meta.url)),
'views': fileURLToPath(new URL('./src/views', import.meta.url)),
'utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
}
},
})
}
js server: {
host: '192.168.100.106',//设置服务启动时的IP地址,设置为0.0.0.0 或者 true 将监听所有地址,包括局域网和公网地址
port: 9974,// 设置服务启动时的端口
strictPort: true,// 严格按照指定端口启动服务,若是端口被占用就无法启动
open: '/',// 服务启动后自动在浏览器打开应用且URL为此项设置的URL
// 配置代理
proxy: {
// '/api':代理对象,支持正则以'^'开头
"/api": {
target: "http://127.0.0.1:8334/",// 代理的目标
changeOrigin: true,// 将主机头起点更改为代理目标的URL
rewrite: (path) => path.replace(/^\/api/, ""),// 重写路径,替换为空
},
},
},
npm add -D @vitejs/plugin-legacy
对应的
vite.config.js
配置
js// 浏览器兼容插件配置
import legacy from '@vitejs/plugin-legacy'
...
// 插件配置
plugins: [
vue(),
// 配置浏览器兼容插件
legacy({
targets: ['defaults', 'not IE 11']
})
],
vite.config.js
初步配置EG
jsimport { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// 浏览器兼容插件配置
import legacy from '@vitejs/plugin-legacy'
// https://vitejs.dev/config/
export default ({commod, mode}) => {
/**
* 描述
* @date 用于加载自定义的env环境
* @param {any} 'mode': 模式,Vite启动时会自动传入启动时的指令中的参数
* @param {any} 'process.cwd()':返回Node.js进程的当前工作目录
* @returns {any} 环境变量
*/
// loadEnv(mode, process.cwd())一般为loadEnv(mode, './')
const env = loadEnv(mode, process.cwd());
return defineConfig({
// 若是部署在二级目录,则基础路径需要更改;否则为'/'当前目录
base: env.VITE_APP_BASE || '/',
// 插件配置
plugins: [
vue(),
// 配置浏览器兼容插件
legacy({
targets: ['defaults', 'not IE 11']
})
],
/*
路径解析
在搭配ts使用时,还需要同步在tsconfig.json的compilerOptions.paths中也同步配置
*/
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'comps': fileURLToPath(new URL('./src/components', import.meta.url)),
'views': fileURLToPath(new URL('./src/views', import.meta.url)),
'utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
}
},
// 用于设置以此项开头的需要暴露在客户端源码的环境变量,默认为'VITE';设置为空字符串时,所有环境变量都会暴露在客户端源码中,Vite会在检测后报错
//envPrefix:[],
server: {
host: '192.168.100.106',//设置服务启动时的IP地址,设置为0.0.0.0 或者 true 将监听所有地址,包括局域网和公网地址
port: 9974,// 设置服务启动时的端口
strictPort: true,// 严格按照指定端口启动服务,若是端口被占用就无法启动
open: '/',// 服务启动后自动在浏览器打开应用且URL为此项设置的URL
// 配置代理
proxy: {
// '/api':代理对象,支持正则以'^'开头
"/api": {
target: "http://127.0.0.1:8334/",// 代理的目标
changeOrigin: true,// 将主机头起点更改为代理目标的URL
rewrite: (path) => path.replace(/^\/api/, ""),// 重写路径,替换为空
},
},
},
// 构建选项
build: {
target: ['es2021', 'chrome100', 'safari13'],// 构建目标
minify: 'esbuild',// 设置压缩混淆,默认为'esbuild'
sourcemap: false,//构建后是否生成SourceMap文件
// outDir:'dist',//指定输出目录, 默认为相对于根目录下的dist
// assetsDir:'assets'.//指定静态资源存放目录,相对于outDir
// chunkSizeWarningLimit:'400',//规定触发警告时的块大小(kbs为单位)
},
})
}
本文作者:RKLS
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!