赞
踩
相较于webpack,vite采用了不同的运行方式:
默认项目源码目录就是根目录,而不像 webpack 那样是 src 目录。
我们可以初始化一个工程:
npm init
npm i vite -D
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>Document</title> <script type="module" src=./index.js ></script> </head> <body> <h1>Vite demo</h1> </body> </html>
document.body.insertAdjacentHTML('beforeend', '<h1>Hello Vite!</h1>')
然后执行 :
npx vite
启动项目,并且自动支持热更新和启动服务器。
npx vite build
进行项目打包,且使用 的是 ESM。但是 ESM 必须通过 url的方式进行加载,也就是说,使用打包后的 html 不能运行项目,必须使用 http / https 才可以,所以需要通过服务器打开项目。
但是 live server 也不可以,live server 的根目录配置有问题,默认配置的根目录是项目目录,我们还需要改为 dist 目录。
所以要么通过将 dist 放在服务器运行,要么 执行 npx vite preview
运行。
vite
是开发服务器,并不对项目进行打包;而vite preview
是打包后的预览服务器。
一般的 style,css(sass, less 等),图片处理 等一系列常用配置 vite 已经内置了,无需我们手动配置。
要想为传统浏览器提供支持(es6 -> es5),可以按下面这样使用官方插件 @vitejs/plugin-legacy:
$ npm add -D @vitejs/plugin-legacy
// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11'],
}),
],
})
legacy 在打包时需要插件 terser(用于压缩代码),所以还需要装:
npm i terser -D
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。