Vue构建遇到的问题

发表于 | 分类于 | 阅读次数
undefined

这将是一篇杂文，汇总自己开发过程中遇到的所有有关vue构建的问题。

解决Error: ENOENT: no such file or directory, scandir ‘D:\IdeaWork\code-front-jet\node_modules.npmins

在使用npm安装node-sass的时候，可能会出现如下的报错：

1
2
3
Error: ENOENT: no such file or directory, scandir 'D:\IdeaWork\code-front-jet\node_modules\.npminstall\node-sass\3.7.0\node-sass\vendor'
    at Error (native)

解决方案是执行以下方法：
npm rebuild node-sass

当然，我也遇到了不属于node-sass的报错。是另一个奇怪的报错。这时候

1
npm install -g npm@latest

更新npm版本就可以了=。= 具体原因不明

引入ts

How to remove experimentalDecorators warning in VSCode
TypeScript 支持
Vue2.5+ Typescript 引入全面指南
vue-class-component

取消掉experimentalDecorators的警告：

1
2
3
4
5
6
7
// tsconfig.json
"compilerOptions": {
  // 取消掉警告
  "experimentalDecorators": true,
  // 允许引入没有types申明的js文件
  "allowJS": true
}

在app.ts文件下会导致new App()但是判断为未使用

1
2
3
4
5
// tslint.json
// 允许定义new 未使用
"rules": {
  "no-unused-expression": [true, "allow-new"]
}

解决 Webpack “Invalid Host Header”

原因具体可以看文章：也就是webpack的安全保护
解决 Webpack “Invalid Host Header”

1
2
3
4
5
// webpack.dev.conf.js
devServer: {
  // 禁用主机检测
  disableHostCheck: true,
}

vue+ts .vue文件import报错

只要在src根目录下，新建一个vue-shim.d.ts文件，里面内容如下：

1
2
3
4
5
// 告诉TypeScript `*.vue`后缀的文件可以交给`vue`模块来处理
declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

如何编写.d.ts文件

如何编写一个d.ts文件

扩展支持Object.assign

1
2
3
declare interface ObjectConstructor {
    assign(target: any, ...sources: any[]): any;
}

Vue v-for 报错

vetur插件提示 [vue-language-server] Elements in iteration expect to have ‘v-bind:key’ directives错误的解决办法

引入sass

如何在vue-cli中引入sass