vue3使用別名報(bào)錯(cuò)如何解決

這篇“vue3使用別名報(bào)錯(cuò)如何解決”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“vue3使用別名報(bào)錯(cuò)如何解決”文章吧。

解決vue3使用別名報(bào)錯(cuò)問(wèn)題：

在vue-cli3以上，創(chuàng)建vue3工程以及使用typescript中，會(huì)自動(dòng)配置好別名。

見于項(xiàng)目根路徑下的 tsconfig.json

"baseUrl": ".",
"paths": {
      "@/*": [
        "src/*"
      ]
    }
"include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ]

首先是您的路徑正確的問(wèn)題下，如果使用了 vetur 插件，一直報(bào)別名路徑找不到的問(wèn)題

因此可以直接在 vetur 插件的配置中修改配置

打開設(shè)置，找到 vetur 插件

找到 setting.json 配置

在 setting.json 中加上 “vetur.validation.script”: false

即可解決 vetur 報(bào)錯(cuò)問(wèn)題

在這個(gè)項(xiàng)目中并不需要添加 vue.config.js 文件

附：vue中的別名設(shè)置

對(duì)于3.0+的Vue，新建vue.config.js。

const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                '#': resolve('src'),
            }
        }
    },
}

在我們的路由文件中，就可以寫成

import Login from '#/views/Login.vue'

再例如我們把src/views目錄的別名設(shè)置為views

const path = require('path')
 
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                '#': resolve('src'),
                'views':resolve('src/views'),
            }
        }
    },
 
}
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from 'views/Login.vue'

備注：自建的vue.config.js和默認(rèn)配置合并成最終的配置。

以上就是關(guān)于“vue3使用別名報(bào)錯(cuò)如何解決”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。