Vue3在Vite中的配置
创建vue3项目
使用vue脚手架创建vue项目
好处:基于vite构建,并且不需要自己配置vue-router,pinia,eslint,vitest等
npm init vue@latest
参考
https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
直接使用vite创建vue3项目
好处:项目比较清洁
坏处:需要自己配置vue-router,pinia,eslint,vitest等
npm create vite@latest
参考
配置scss并使用
提出问题
单个文件引入时,需要在每个 style lang="scss" scoped
标签下这样引入,每次都要手动引入非常麻烦,因此就想做全局配置
@import "@/assets/scss/global.scss"
解决方案
1.下载好sass 和 sass-loader
npm install sass --save-dev
npm install sass-loader --save-dev
2.在vite中配置
// vite.config.ts export default defineConfig({ ......., resolve: { alias: { '@': resolve('./src') } }, css: { preprocessorOptions: { scss: { // 两种方式都可以 additionalData: '@import "@/assets/scss/global.scss";' // additionalData: '@use "@/assets/scss/global.scss" as *;' } } }, .... })
// global.scss $font-color-gray:rgb(147,147,147);
3.在vue项目中使用
<script setup lang="ts"></script> <template> ........ </template> <style lang="scss" scoped> .publish-info { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif; font-size: 12px; line-height: 12px; color: $font-color-gray; // 这里引入 } </style>
注意事项
在main.js中不要再次引入global.scss文件,否则会报已经加载过的错误。
修改启动端口
vite的缺省端口是3000,如果需要修改这个端口,可以编辑文件package.json,在scritps中找到启动命令,这里是dev,在vite后面增加--port 5419。这样,启动端口就修改为5419.
"dev": "vite --port 5419",