0%

Vue3.x + Vite2.x 实战 01:Vite 遇到的坑

为了记录自己的成长经历,我决定把自己实战遇到的坑记录起来,一来方便日后查阅,二来给后人提供一份帮助。

提示:本篇文章会持续更新,记录Vite相关遇到的坑

环境介绍

大家都熟知开发环境不同,碰到的问题很有可能也不同。为了不给大家带来困恼(跟你配置完全一样,为啥你的可以我的不可以),介绍下我的开发环境

  • Windows 10
  • VSCode 1.54.3
  • Node.js v12.16.1
  • Vue 3.0.5
  • Vite 2.0.5
  • typescript 4.1.3

概要内容:

  1. 配置alias无效
  2. main.ts中全局引入样式,使用Sass样式变量提示变量未定义

1. 配置alias无效

  • 报错如下:
  • 解决方法:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // vite.config.ts 添加alias配置即可

    resolve: {
    alias: [
    {
    find: '/@',
    replacement: path.resolve(__dirname, './src')
    }
    ]
    },

2. main.ts中全局引入样式,使用Sass样式变量提示变量未定义

  • 报错如下:
  • 解决方法:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // vite.config.ts 添加对应sass变量样式文件配置即可

    css: {
    preprocessorOptions: {
    scss: {
    additionalData: `@import "./src/assets/styles/variables";`
    }
    }
    },

以上: 如发现有问题,欢迎留言指出,我及时更正

如何文章对你有益,请给我买杯豆浆喝