使用vite + vue3遇到的问题

最新推荐文章于 2024-05-20 17:02:17 发布

何以入怀

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量514

点赞数

文章标签： vue.js javascript 前端 vue

本文链接：https://blog.csdn.net/qq_44570971/article/details/127430340

版权

一、自动导入vue3/vue-router/pinia Api

安装插件
```
 npm i -D unplugin-auto-import
```

vite.config.js中配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite"

export default defineConfig({
  plugins: [vue(),AutoImport({
    imports:['vue',"vue-router"],  // 插件预设支持导入的api
    dts:"src/auto-import.d.ts"
  })],
})

二、vite中使用scss

下载
```
npm i sass-loader sass -D
```
直接在组件中使用

引用全局scss

css: {
    preprocessorOptions: {
      scss: {
        charset: false, // 避免出现: build时的 @charset 必须在第一行的警告
        additionalData: `@import "@/assets/style/common.scss";`,
      }
    }
  },

但是！！！还是会报错，需要添加以下配置。
在这里插入图片描述

import { fileURLToPath, URL } from 'node:url';
	 resolve: {
	      alias: {
	          '@': fileURLToPath(new URL('./src', import.meta.url))
	      }
	  },