从零开始搭建vite开发环境
准备
nodejs 18
pnpm
https://vitejs.cn/
开始
pnpm init
pnpm add -D vite
新建index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>从零开始搭建vite环境</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
修改package.json
{
"name": "vitestu01",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"vite": "^5.3.3"
}
}
输入pnpm run dev
新建src目录
src目录下新建main.js，安装jquery插件
pnpm add jquery
修改index.html
<script type="module" src="/src/main.js"></script>
修改package.json，增加type
"type": "module",
如果直接访问js则会报错
安装scss
pnpm add -D sass
src下新建scss文件夹，该文件夹下新建index.scss
$font-color:#f00;
body{
h1{
color: $font-color;
}
}
修改main.js
import $ from 'jquery';
import '@/scss/index.scss';
$(function (){
console.log("初始化成功");
})
新增vite.config.js
import $ from 'jquery';
import '@/scss/index.scss';
$(function (){
console.log("初始化成功");
})
如果想定义全局变量，可以在scss下新建global.scss
$bg-color:#0f0;
修改index.scss
$font-color:#f00;
body{
h1{
color: $font-color;
background: $bg-color;
}
}
修改vite.config.js
import { defineConfig } from 'vite'
// path报错安装 @types/node
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
],
resolve: {
alias: {
'@': path.resolve('./src'),
},
},
// scss全局变量的配置
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: '@import "@/scss/global.scss";'
}
}
}
})
重新启动编译即可
打包
pnpm run build
jquery和自己写的代码都一块打包了，html中单独引入jQuery cdn链接即可
import { defineConfig } from 'vite'
// path报错安装 @types/node
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
],
resolve: {
alias: {
'@': path.resolve('./src'),
},
},
// scss全局变量的配置
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: '@import "@/scss/global.scss";'
}
}
},
build:{
rollupOptions:{
external: ['jquery'],
output: {
globals: {
jquery: 'jQuery',
},
},
}
}
})
然后打包即可
原文地址：https://blog.csdn.net/qq_36437991/article/details/140266831
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！