【前端问题精选】.ts文件识别不了.vue 文件

main.ts

import Vue from "vue";

import Component from "vue-class-component";

import App from "./App.vue";

报这个错误

Cannot find module './App.vue' or its corresponding type declarations.

tsconfig.json

{ // 编译选项

"compilerOptions": {

// 编译输出目标 ES 版本

"target": "esnext",

// 采用的模块系统

"module": "esnext",

// 以严格模式解析

"strict": false,

"jsx": "preserve",

// 从 tslib 导入外部帮助库: 比如__extends,__rest等

"importHelpers": true,

// 如何处理模块

"moduleResolution": "node",

// 启用装饰器

"experimentalDecorators": true,

"esModuleInterop": true,

// 允许从没有设置默认导出的模块中默认导入

"allowSyntheticDefaultImports": true,

// 定义一个变量就必须给它一个初始值

"strictPropertyInitialization" : false,

// 允许编译javascript文件

"allowJs": true,

// 是否包含可以用于 debug 的 sourceMap

"sourceMap": true,

// 忽略 this 的类型检查, Raise error on this expressions with an implied any type.

"noImplicitThis": false,

// 解析非相对模块名的基准目录

"baseUrl": ".",

// 给错误和消息设置样式,使用颜色和上下文。

"pretty": true,

// 设置引入的定义文件

"types": ["webpack-env", "mocha", "chai"],

// 指定特殊模块的路径

"paths": {

"@/*": ["src/*"]

},

// 编译过程中需要引入的库文件的列表

"lib": ["esnext", "dom", "dom.iterable", "scripthost"],

"typeRoots": [

"./types",

"./node_modules/vue/types",

"./src"

],

},

// ts 管理的文件

"include": [

"src/**/*.ts",

"src/**/*.tsx",

"src/**/*.vue",

"tests/**/*.ts",

"tests/**/*.tsx"

],

// ts 排除的文件

"exclude": ["node_modules"]

}

shims-vue.d.ts

import Vue from "vue";

import VueRouter, { Route } from "vue-router";

declare module '*.vue' {

export default Vue

}

declare module "vue/types/vue" {

interface Vue {

$router: VueRouter; // 这表示this下有这个东西

$route: Route;

$http: any;

$Message: any;

$Modal: any;

}

}

第一次用ts写vue,不知道为什么报这个错误,

.vue文件里能识别.vue文件,.ts文件里就识别不了,但是页面能正常打开

package.json

{

"name": "scgx",

"version": "0.1.0",

"private": true,

"scripts": {

"start": "vue-cli-service serve",

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint",

"test:unit": "vue-cli-service test:unit"

},

"dependencies": {

"axios": "^0.18.0",

"element-ui": "^2.13.2",

"vue": "^2.6.6",

"vue-class-component": "^6.0.0",

"vue-property-decorator": "^7.0.0",

"vue-router": "^3.0.1",

"vuex": "^3.0.1"

},

"devDependencies": {

"@types/chai": "^4.1.0",

"@types/mocha": "^5.2.4",

"@vue/cli-plugin-babel": "^3.5.0",

"@vue/cli-plugin-eslint": "^3.5.0",

"@vue/cli-plugin-typescript": "^3.5.0",

"@vue/cli-plugin-unit-mocha": "^3.5.0",

"@vue/cli-service": "^3.5.0",

"@vue/eslint-config-prettier": "^4.0.1",

"@vue/eslint-config-typescript": "^4.0.0",

"@vue/test-utils": "1.0.0-beta.29",

"babel-eslint": "^10.0.1",

"babel-plugin-component": "^1.1.1",

"chai": "^4.1.2",

"eslint": "^5.8.0",

"eslint-plugin-vue": "^5.0.0",

"less": "^3.0.4",

"less-loader": "^4.1.0",

"typescript": "^3.2.1",

"vue-template-compiler": "^2.5.21",

"vuex-class": "^0.3.2"

}

}

vue.config.js

const path = require("path");

const sourceMap = process.env.NODE_ENV === "development";

module.exports = {

// 基本路径

publicPath: "./",

// 输出文件目录

outputDir: "dist",

// eslint-loader 是否在保存的时候检查

lintOnSave: false,

// webpack配置

// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md

chainWebpack: () => {},

configureWebpack: config => {

if (process.env.NODE_ENV === "production") {

// 为生产环境修改配置...

config.mode = "production";

} else {

// 为开发环境修改配置...

config.mode = "development";

}

Object.assign(config, {

// 开发生产共同配置

resolve: {

extensions: [".js", ".vue", ".json", ".ts", ".tsx"],

alias: {

vue$: "vue/dist/vue.js",

"@": path.resolve(__dirname, "./src"),

"@c": path.resolve(__dirname, "./src/components"),

utils: path.resolve(__dirname, "./src/utils"),

views: path.resolve(__dirname, "./src/views"),

assets: path.resolve(__dirname, "./src/assets"),

com: path.resolve(__dirname, "./src/components")

}

}

});

},

// 生产环境是否生成 sourceMap 文件

productionSourceMap: sourceMap,

// css相关配置

css: {

// 是否使用css分离插件 ExtractTextPlugin

extract: true,

// 开启 CSS source maps?

sourceMap: false,

// css预设器配置项

loaderOptions: {},

// 启用 CSS modules for all css / pre-processor files.

modules: false

},

// use thread-loader for babel & TS in production build

// enabled by default if the machine has more than 1 cores

parallel: require("os").cpus().length > 1,

// PWA 插件相关配置

// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

pwa: {},

// webpack-dev-server 相关配置

devServer: {

open: process.platform === "darwin",

host: "localhost",

port: 3001, //8080,

https: false,

hotOnly: false,

proxy: {

// 设置代理

// proxy all requests starting with /api to jsonplaceholder

"/api": {

target: "http://localhost:8989/",

changeOrigin: true,

ws: true,

pathRewrite: {

"^/api": ""

}

}

},

before: app => {}

},

// 第三方插件配置

pluginOptions: {

// ...

}

};

回答:

不要再shims-vue.d.ts中最外层使用import,使用这种写法

declare module '*.vue' {

import Vue from 'vue';

export default Vue;

}

declare module "vue/types/vue" {

import VueRouter, { Route } from 'vue-router';

interface Vue {

$router: VueRouter; // 这表示this下有这个东西

$route: Route;

$http: any;

$Message: any;

$Modal: any;

}

}

回答:

先走 vue loader 再走 ts

以上是 【前端问题精选】.ts文件识别不了.vue 文件 的全部内容, 来源链接: www.h5w3.com/134340.html

回到顶部