VUE - 配置根目錄（用@代表src目錄）

无心々菜發表於2024-11-04
Vue

VUE - 配置根目錄（用@代表src目錄）

在 Vue 專案中，@ 符號通常被用作一個別名，代表專案中的 src 目錄。這通常是透過 webpack 的 resolve.alias 配置實現的。

例如，如果你有一個 Vue 元件在 src/components 目錄下，你可以在這個元件中這樣匯入它：

import MyComponent from '@/components/MyComponent.vue';
import MyComponent from '../components/MyComponent.vue';

這是因為 webpack 配置了一個別名 @ 指向 src 目錄。

如果你使用 Vue CLI 建立的專案，這個配置預設已經為你設定好了。如果你需要自己設定，可以在 vue.config.js 檔案中新增如下配置：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

引用：https://www.jb51.net/article/254828.htm

相關文章