vue @ ~ 相對路徑 路徑別名設置方式

Posted on by

@ ~ 相對路徑 路徑別名設置

  • ./這是相對路徑的意思，同級目錄。
  • ../上級目錄。
  • @/這是webpack設置的路徑別名。在build/webpack.base.conf這個文件裡面設置瞭@具體指的是什麼

在build/webpack.base.conf裡找到如下

resolve: {
    extensions: ['.js', '.vue', '.json'],//取消後綴  引入文件路徑就不用加文件後綴瞭
    alias: {
      'vue$': 'vue/dist/vue.esm.js', //引入vue
      '@': resolve('src'),
      'asd': resolve('src/components/children'), //自己新建 要從src開始寫文件路徑
    }
  },

使用 import heads from '@/components/children/heads'就不用頻繁的使用./和../瞭，而是利用@直接定位到瞭src目錄。

或者 import heads from 'asd/heads'

另外：在組件中，我們會引用一些靜態文件，即static下的文件， 這時我們就不能用上面這些相對路徑瞭的配置瞭，而必須使用一般的路徑方式方式。

項目設置src相對路徑為@

第一步 創建vue.config.js文件

第二步 添加代碼

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {},
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src')),
      .set('@u', resolve('src/utils')),
      "@c": resolve("src/components"),
        "@v": resolve("src/pages"),
        "@s": resolve("src/static"),
        "@u": resolve("src/utils")

  }
}

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：