Vite 2.0配置
一.vite介绍
vite官网:https://cn.vitejs.dev/
Vite 是由 Vue 作者尤雨溪开发的一套一种新的、更快地 web 开发工具，它具快速的冷启动、即时的模块热更新、真正的按需编译几个特点。
二.项目搭建- vue3.0 + vite2
注意事项:
1.官方发布：Vite 目前只适用于 Vue 3.x，这也意味着开发的过程中不能使用与 Vue 3 不兼容的库。
2.Vite默认端口为3000,和webpack的8080有所区别,需要注意
3.和用Cli构建工具创建的项目不同,Vite初始化的项目比较纯净,相关依赖需要自行添加,如常用的vue-router/vuex等
//npm用户
npm init @vitejs/app
cd <项目名称>
npm install
npm run dev
npm run build
//yarn用户
yarn create @vitejs/app
cd <项目名称>
yarn install
yarn dev
yarn run build
三.配置留存 vite.config.js
import {
defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
import viteCompression from 'vite-plugin-compression';
const path = require('path');
// https://vitejs.dev/config/
export default defineConfig({
build: {
// outDir: "./www", //打包后的文件目录
publicDir: 'assets',
// 去除console
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
},
rollupOptions: {
output: {
assetFileNames: 'css/[name].[hash].css',
chunkFileNames: 'js/[name].[hash].js',
entryFileNames: 'js/[name].[hash].js'
}
}
},
server: {
host: '0.0.0.0', // 默认为localhost
port: 7000, // 端口号
open: true, // 是否自动打开浏览器
base: './', // 生产环境路径
strictPort: true,
optimizeDeps: {
include: ['axios', 'element-plus'] // 引入第三方插件
},
proxy: {
// 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
'^/api': {
target: 'http://127.0.0.1', // 后端服务实际地址
changeOrigin: true,
rewrite: () => path.replace(/^\/api/, '')
}
}
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
}
},
css: {
preprocessorOptions: {
scss: {
modifyVars: {
},
javascriptEnabled: true
}
}
},
plugins: [
vue(),
styleImport({
// css样式按需加载
libs: [
{
libraryName: 'element-plus',
esModule: true,
ensureStyleFile: true,
resolveStyle: name => {
if (name === 'locale') return '';
return `element-plus/lib/theme-chalk/${
name}.css`;
},
resolveComponent: name => {
return `element-plus/lib/${
name}`;
}
}
]
}),
viteCompression({
// 开启gzip模式
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz'
})
]
});
这样,一个基本Vite配置就完成了,具体的配置根据自有的项目进行调整