环境
nodejs 18
pnpm
初始化
pnpm init
pnpm add -D vite --registry http://registry.npm.taobao.org
pnpm add bootstrap @popperjs/core --registry http://registry.npm.taobao.org
pnpm add -D sass --registry http://registry.npm.taobao.org
新建vite.config.js
const path = require('path')
export default {
root: path.resolve(__dirname, 'src'),
server: {
port: 8080,
hot: true
}
}
src下新建index.html
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Vite</title>
</head>
<body>
<div class="container py-4 px-3 mx-auto">
<h1>Hello, Bootstrap and Vite!</h1>
<button class="btn btn-primary">Primary button</button>
</div>
<script type="module" src="./js/main.js"></script>
</body>
</html>
修改package.json
"scripts": {
"start": "vite"
},
运行
pnpm start
引入bootstrap
修改vite.config.js
const path = require('path')
export default {
root: path.resolve(__dirname, 'src'),
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
server: {
port: 8080,
hot: true
}
}
新建 src/scss/styles.scss
@import "~bootstrap/scss/bootstrap";
新建src/js/main.js
// Import our custom CSS
import '../scss/styles.scss'
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
//单个引入
//import {Button} from 'bootstrap'
打包
修改package.json
"scripts": {
"start": "vite",
"build": "vite build"
},
执行pnpm build
dist相对于index.html，默认会在src目录下和index.html同级
如果想打包到src目录外可以设置相对路径
const path = require('path')
export default {
root: path.resolve(__dirname, 'src'),
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
server: {
port: 8080,
hot: true
},
build:{
outDir:'../dist'
}
}
