vite是什么
Vite (法语意为 "快速的"，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。
它主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
为什么要选vite
- vite2 极速服务，它直接使用 ESM 文件，每次更新速度贼快，只要你的浏览器支持即可
- webpack 优点在于生态强大，这一点 vite 还需要继续努力
- 除了开发环境的服务启动和更新速度差距大以外，在打生产包上并没有什么差距
实现
1.卸载webpack相关的依赖, 删除vue.config.js配置文件
2.安装依赖
npm i vite --save -dev
npm i vite-plugin-html --save -dev
一个用于处理html的vite插件,类似于webpack-html-plugin
npm i vite-plugin -compression
用于代码压缩
npm i vite-plugin-imagemin --save -dev
用于图片压缩
npm i vue-loader-v16 --save -dev
类似于vue-loader
3.修改index.html
<script src=".src.main.js" type="module"></script>
这里要注意index.html需要放到根目录下（参见vite官网）
4.修改vite.config.js配置文件
import { defineConfig } from 'vite';
const { resolve } = require('path');
import vue from '@vitejs/plugin-vue';
import webpackConfig from './src/config/package.ts';
export default defineConfig({
base: webpackConfig.PUBLIC_PATH,
publicDir: resolve(__dirname, 'public'),
assetsInclude: resolve(__dirname, 'src/assets'),
resolve: {
// 别名
alias: {
'@': resolve(__dirname, 'src'),
},
},
server: {
port: webpackConfig.PORT,
proxy: {
'/api': {
target: webpackConfig.PROXY_URL,
changeOrigin: true, //是否跨域
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
build: {
sourcemap: !webpackConfig.IS_PRODUCTION,
},
plugins: [vue()],
});
5.修改package.json打包命令
"scripts": {
"serve": "cross-env NODE_ENV=development vite",
"build": "cross-env NODE_ENV=production vite build",
"lint": "vite lint"
},
这样我们就大功告成了
npm i
npm run serve
Vite 需要 [Node.js](https://nodejs.org/en/) 版本 >= 12.0.0。
1.修改代理地址不用重启
hmr就完事了
2.图片地址使用别名报404
require(@/assets/img) 替换成/src/assets/
实际上，Vite 并不需要在开发阶段处理这些代码！在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。
function getImageUrl(name) {return new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url).href;}
引入图片不支持require
3.启动项目不支持ip:port访问
修改vite.config.js配置
server:{
host: '0.0.0.0'
}
然后修改package.json
"dev": "vite --host 0.0.0.0"
4.require.context()
使用vite提供的import.glob进行替换
5.模式与环境变量
https://zhuanlan.zhihu.com/p/378228376
import { loadEnv } from 'vite'
export default ({ mode }) => {
return defineConfig({
plugins: [vue()],
base:loadEnv(mode, process.cwd()).VITE_APP_NAME
})
}
.**env.staging文件声明变量注意**
**VITE_NODE_ENV = development**
**VITE_BASE_URL = /api**
**VITE_PUBLIC_PATH = /**
**不能有引号 、分号等字符**
6.less
npm i less -D
里面还有写具体的坑 ，大家可以自己踩踩！
网友评论