6

我正在尝试用 vite 替换 vue-cli。我有一个 vite.config.js，所以我可以使用别名进行导入：

export default {
    alias: {
        '@': require('path').resolve(__dirname, 'src'),
    },
};

然后在我的 main.ts 中，我尝试导入我的 css 文件（我尝试使用或不使用.module：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import '@/assets/app.module.css';

createApp(App).use(router).mount('#app');

但我得到这个错误：

[vite] 无法解析模块导入“@/assets/app.module.css”。（由 /src/main.ts 导入）

我究竟做错了什么？

4

4 回答 4

3

@Boussadjra Brahim 回答了最初的问题，我只想为其他对 VSCode 和 vite 设置有问题的人添加一些见解。这是我的简约 tsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "esModuleInterop": true,
        "moduleResolution": "node",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "target": "esnext"
    },
    "include": [
        "src/**/*.ts",
    ]
}
  • esModuleInterop：我需要它才能import seedrandom from 'seedrandom';
  • moduleResolution: 需要从vue
  • 路径：不需要导入所有内容，/@/但只需要@/
  • 目标：需要在我的模型中使用 getter 和 setter ( get x, set x)
于 2020-10-24T09:23:29.920 回答
3

截至目前，我可以通过以下方式vite@2.1.5解决@和别名的解析：~

  • 添加vite 别名

  • 修改vite.config.js如中所述readme.md

  • 使用别名为引用的 scss 文件添加~别名，如下所示：

    aliases.push({ find: '~bootstrap', replacement: 'bootstrap' })

现在vite.config.js看起来如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { getAliases } from 'vite-aliases'

const aliases = getAliases();

// add aliases to import scss from node_modules here

aliases.push({ find: '~bootstrap', replacement: 'bootstrap' })

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: aliases
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@scss/shared.scss";'
      }
    }
  }
})

这使我可以按如下方式导入 scss 文件：

在src/main.ts：

import '@scss/main.scss'

在src/scss/main.scss：

@import "~bootstrap/scss/bootstrap";

显然，如果需要从 的子目录中导入更多的 scss 文件，则node_modules需要在aliases. 省略用于导入的波浪号别名是可行的bootstrap.scss，但我的 IDE 无法识别它。在每个 vue SFC 中添加要导入的css.preprocessorOptions.scss.additionalData原因。shared.scss

于 2021-04-28T10:13:10.717 回答
2

根据那些代码行

别名 fs 目录
的路径密钥必须以斜杠开头和结尾
'/@foo/': path.resolve(__dirname, 'some-special-dir')

所以试试看：

 '/@/': require('path').resolve(__dirname, 'src'),
于 2020-10-23T17:25:49.000 回答
2

经过测试

只是想补充一下：对于仍在查看此答案的任何人，您需要添加解决方法以便它工作，如网站中所述。我没有添加斜杠 '/@/' 这对我有用：

例子：

resolve: {
    alias: {
      '@': require('path').resolve(__dirname, 'src')
    }
  },

https://vitejs.dev/config/#resolve-alias

于 2021-03-24T08:25:05.500 回答