首頁 > web前端 > Vue.js > vue3使用別名報錯誤如何解決

vue3使用別名報錯誤如何解決

王林
發布: 2023-05-11 09:43:05
轉載
1071 人瀏覽過

解決vue3使用別名報錯問題:

在vue-cli3以上,建立vue3工程以及使用typescript中,會自動配置好別名。

見於專案根路徑下的tsconfig.json

"baseUrl": ".",
"paths": {
      "@/*": [
        "src/*"
      ]
    }
"include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ]
登入後複製

首先是您的路徑正確的問題下,如果使用了vetur 插件,一直報別名路徑找不到的問題

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

打開設置,找到vetur 插件

vue3使用別名報錯誤如何解決

找到setting.json 配置

vue3使用別名報錯誤如何解決

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

vue3使用別名報錯誤如何解決

即可解決vetur 報錯問題

#在這個專案中並不需要加入vue.config.js 檔案

#附:vue中的別名設定

對於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目錄的別名設定為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和預設配置合併成最終的配置。

以上是vue3使用別名報錯誤如何解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:yisu.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板