vue2引用typeScript的步骤
笔者在webpack+vue2中引入ts走过了各种坑,花费了不少时间,故写下这个笔记,希望能帮到有需要的朋友1.安装ts的依赖npm i ts-loader typescript --save-dev2. 在根目录下新增tsconfig.json(与package.json同级)。内容可参考如下{"compilerOptions": {"experimentalDecorators": true,
笔者在webpack+vue2中引入ts走过了各种坑,花费了不少时间,故写下这个笔记,希望能帮到有需要的朋友
1. 安装ts的依赖
npm i ts-loader typescript --save-dev
2. 在根目录下新增tsconfig.json(与package.json同级)。内容可参考如下
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"moduleResolution": "node",
"lib": ["dom","es2016"],
"baseUrl": "./",
"paths": {
"@/*": ["./src/*"]
}
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"src/**/*.d.ts"
],
"exclude": ["node_modules"]
}
3. webpack引入ts-loader。我用的是vue-cli脚手架,直接在vue.config.js中引入ts-loader。引入ts-loader的方式不是唯一,我在这给出两种方式
第一种方式 在configWebpack中引入
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
]
}
}
}
第二种方式 在chainWebpack中引入
module.exports = {
chainWebpack(config) {
config.module
.rule('tsx')
.test(/\.tsx?$/)
.use('ts-loader')
.loader('ts-loader')
.options({
appendTsSuffixTo: [/\.vue$/],
})
.tap(options => {
// 修改它的选项...
return options
})
}
}
4. 到这里就可以直接运行项目了
报错汇总
当然,你会发现还是有报错,下面是我碰到的报错,提供大家参考
1. Syntax Error: TypeError: loaderContext.getOptions is not a function。这是因为ts-loader的版本过高了,可以降低一下
npm i ts-loader@8.2.0 --save-dev
2. Syntax Error: Error: error while parsing tsconfig.json。这是因为监测不到ts文件,在src下的任意文件夹下新建一个ts文件即可
3. TS2307: Cannot find module ‘./xxx.vue’ or its corresponding type declarations。引用自己写的vue文件报错,可能是因为引用的vue文件的脚本没有使用ts,在script头标签加入lang="ts"即可
还有其他问题可以留言,大家一起学习探讨
更多推荐
所有评论(0)