vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它做到了本地快速开发启动:
快速的冷启动,不需要等待打包操作;
即时的热模块更新,替换性能和模块数量的解耦让更新飞起;
真正的按需编译,不再等待整个应用编译完成,这是一个巨大的改变。
vite项目中使用的不是vue.config.js,而是vite.config.js
vite.config.js配置:
import path from 'path'
// vite.config.js # or vite.config.ts
module.exports = {
alias: {
// 键必须以斜线开始和结束
'/@/': path.resolve(__dirname, './src')
},
hostname: '0.0.0.0',
port: 8080,
// 是否自动在浏览器打开
open: true,
// 是否开启 https
https: false,
// 服务端渲染
ssr: false,
/**
* 在生产中服务时的基本公共路径。
* @default '/'
*/
base: './',
/**
* 与“根”相关的目录,构建输出将放在其中。如果目录存在,它将在构建之前被删除。
* @default 'dist'
*/
outDir: 'dist',
// 反向代理
proxy: {
'/api': {
target: 'https://blog.csdn.net/weixin_45292658',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
vite2.0配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { resolve } from 'path' // 主要用于alias文件路径别名
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
/**
* 在生产中服务时的基本公共路径。
* @default '/'
*/
base: './',
// 构建
build: {
outDir: 'dist', //指定打包输出路径
assetsDir: 'assets', //指定静态资源存放路径
cssCodeSplit: true, //css代码拆分,禁用则所有样式保存在一个css里面
sourcemap: false, //是否构建source map 文件
// 生产环境取消 console
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
},
//会打包出 css js 等文件夹 目录显得清晰
rollupOptions: {
output: {
chunkFileNames: 'js/[name]-[hash].js',
entryFileNames: 'js/[name]-[hash].js',
assetFileNames: '[ext]/[name]-[hash].[ext]'
}
}
},
// 别名
resolve: {
alias: {
'@': resolve(__dirname, '.', 'src')
}
},
// 本地服务
server: {
host: "0.0.0.0", // ip
port: 8080, // 端口号
open: false, // 是否自动在浏览器打开
https: false, // 是否开启 https
// 跨域代理配置
proxy: {
'/api': {
target: 'https://blog.csdn.net/weixin_45292658',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
})