vite环境下使用bootstrap

环境

nodejs 18
pnpm

初始化

bash 复制代码
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

js 复制代码
const path = require('path')

export default {
    root: path.resolve(__dirname, 'src'),
    server: {
        port: 8080,
        hot: true
    }
}

src下新建index.html

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

json 复制代码
  "scripts": {
    "start": "vite"
  },

运行

bash 复制代码
pnpm start

引入bootstrap

修改vite.config.js

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

css 复制代码
@import "~bootstrap/scss/bootstrap";

新建src/js/main.js

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

json 复制代码
  "scripts": {
    "start": "vite",
    "build": "vite build"
  },

执行pnpm build

dist相对于index.html,默认会在src目录下和index.html同级

如果想打包到src目录外可以设置相对路径

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
    },
    build:{
        outDir:'../dist'
    }
}
相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程7 小时前
2025前端面试题
前端·面试
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo9 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴9 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78910 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原11 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf11 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js