vue相對路徑與路徑別名如何設置

這篇文章主要介紹“vue相對路徑與路徑別名如何設置”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue相對路徑與路徑別名如何設置”文章能幫助大家解決問題。

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

• ./這是相對路徑的意思，同級目錄。

• ../上級目錄。

• @/這是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")

  }
}

關于“vue相對路徑與路徑別名如何設置”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。