【发布时间】：2020-08-09 02:22:57
【问题描述】：
总纲：
import Image from '@/assets/default-profile-picture.svg'
//ERROR: Cannot find module '@/assets/default-profile-picture.svg'.Vetur(2307)
我今天大部分时间都在试图找到解决这个问题的方法。我知道还有很多其他类似的帖子，但它们都已过时（一年多）。
我刚刚生成了一个干净的 Vue CLI 应用程序，但仍然有同样的问题。
我正在使用 Vue CLI 4.2.3 版，刚刚尝试使用 Vue CLI 4.3.1 版，但遇到了同样的问题。
我已检查该文件是否在资产中。
我检查了文件名的拼写是否正确。
我感觉这是一个 webpack 问题，因为在使用 typescript 调用时 require() 不起作用。
我已尝试创建 vue.config.js 并手动设置资产路径。
项目设置配置：
- 功能：Babel、TS、路由器、ESLint
- 不是类风格的语法
- Babel 与 Typescript 一起使用
- 路由器没有历史模式
- 仅具有防错功能的 eslint
- 保存时 Lint
- 配置放在 package.json 中。
Component.vue 中的错误
<script lang="ts">
import Vue from 'vue'
/* Cannot find module '@/assets/default-profile-picture.svg'.Vetur(2307) */
import Image from '@/assets/default-profile-picture.svg'
export default Vue.extend({
components: {
},
props: [
'employeeImage',
'employeeName',
'employeeAge',
'employeeSalary'
],
data () {
return {
marked: false,
result: [],
name: this.employeeName,
age: this.employeeAge,
salary: this.employeeSalary
}
},
computed: {
compClasses: function () {
return {
marked: this.marked
}
},
imageDefault: function () {
if (this.employeeImage === '') {
console.log('employee image empty: ' + this.employeeImage)
return '@/assets/default-profile-picture.svg'
} else {
console.log('employee image set: ' + this.employeeImage)
return this.employeeImage
}
}
}
})
</script>
打字稿配置
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"/src/**/*.*",
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
我做错了什么？ 提前致谢！
【问题讨论】：
-
好像是a Vetur issue。票选最高的解决方案 there：“手动将 Vue 应用程序的文件夹拖到 VS Code 工作区中已打开项目的顶部。”
-
@Dan 我同意这可能是 Vetur 问题。我尝试了您的建议，但遗憾的是它并没有解决问题。但是，它向我展示了比以前更多的 linting 细节。
-
我已经用我的 tsconfig.json 更新了主帖。以下是有关 Vetur 的一些有用信息：vuejs.github.io/vetur/setup.html#project-setup ... 以及 TypeScript 配置中的路径映射：typescriptlang.org/docs/handbook/module-resolution.html 仍在寻找中。
-
@NoHara 你找到解决办法了吗？
标签： vue.js webpack import command-line-interface assets