typescript - “@”不再仅在 vue.js 3 html 模板中重写以 src 为前缀的路径的后缀（但在 TypeScript 文件中仍然可以）

问题描述

我创建了一个新项目 Vue.js 3 + TypeScript，但由于某种原因，它似乎@不再适用于 Vue 模板......我已经检查了一些答案，但到目前为止没有任何结果。

到目前为止我检查过的内容：

package.json：

{
  "name": "vue-typescript-decorators",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@mdi/font": "5.9.55",
    "core-js": "^3.6.5",
    "roboto-fontface": "*",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^4.0.0-0",
    "vuetify": "^3.0.0-alpha.2",
    "vuex": "^4.0.0-0",
    "vuex-class": "^0.3.2",
    "vuex-class-modules": "^1.2.0",
    "vuex-composition-helpers": "^1.0.23"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
    "vue-cli-plugin-vuetify": "~2.3.1"
  }
}

tsconfig.json：

{
  "compilerOptions": {
    "allowJs": true,
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

main.ts：

import { createApp } from "vue";
import vuetify from "@/vuetify";
import App from "@/App.vue";
import router from "@/router";
import store from "@/store";
import "@/styles/app.scss";

createApp(App)
  .use(vuetify)
  .use(store)
  .use(router)
  .mount("#app");

App.vue：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

问题发生的地方 Home.vue：

<template>
  <div class="home">
    <img alt="Vue logo" src="@/assets/logo.png" />
    <Counter msg="Counter" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
import Counter from "@/components/Counter.vue";

@Options({
  name: "Home",
  components: {
    HelloWorld,
    Counter
  }
})
export default class Home extends Vue {}
</script>

图像似乎丢失了，在查看源代码时，发现标签属性中没有重写以下@字符，知道为什么会这样吗？srcimg

注意：我还创建了一个 GitHub存储库来重现该问题：

npm install
npm run serve

[编辑]

我有一个可行的解决方案（在这里）[https://github.com/mary-perret-1986/vue-issue-reproduction/tree/feature/solution] 但需要找出两个分支之间发生了什么变化。

标签： typescriptvue.jswebpackvuejs3

typescript - “@”不再仅在 vue.js 3 html 模板中重写以 src 为前缀的路径的后缀（但在 TypeScript 文件中仍然可以）

问题描述

解决方案

推荐阅读