Vue3+Vite错误以及技巧

记录一下

1.设置文件别名

通过Node的path模块的join

// vite.config.js

import { join } from 'path';
export default defineConfig({
resolve:{
    alias: {
      '@': join(__dirname, './src'),
    }
   }
})

链接

2.引入全局Scss文件

export default defineConfig({
     css: {
        preprocessorOptions: {
          scss: {
            additionalData: `@import "@/assets/styles/utils.scss";`,
          },
    },
  },
})

链接

3.引入JSON文件

需要把JSON文件放在public目录下

axios({
    url:"../public/a.json"
})

4.Element-plus国际化爆红

Ts项目下引入会爆红 import zhCn from 'element-plus/dist/locale/zh-cn.mjs',在d.ts文件里添加以下代码

  //vite-env.d.ts
  declare module 'element-plus/dist/locale/zh-cn.mjs'