vue相對路徑與路徑別名如何設(shè)置

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

@ ~ 相對路徑 路徑別名設(shè)置

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

• ../上級目錄。

• @/這是webpack設(shè)置的路徑別名。在build/webpack.base.conf這個(gè)文件里面設(shè)置了@具體指的是什么

在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'

另外：在組件中，我們會(huì)引用一些靜態(tài)文件，即static下的文件， 這時(shí)我們就不能用上面這些相對路徑了的配置了，而必須使用一般的路徑方式方式。

項(xiàng)目設(shè)置src相對路徑為@

第一步 創(chuàng)建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")

  }
}

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