当前位置：首页 > news >正文

vite环境下使用bootstrap

news 2025/8/14 5:16:17

环境

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'}
}