基于TypeScript-Vue模板搭建项目后引入iView框架报错求助

我来帮你一步步搞定这两个导入问题，之前在基于typescript-vue-starter搭建的项目里，我也碰到过类似的坑：

第一个问题：import iView from 'iview' 类型报错 #

你现有的vue-shims.d.ts只是用来让TypeScript识别.vue单文件组件的，对第三方库iview的类型定义完全起不到作用。这里有两个靠谱的解决办法：

• 办法1：安装官方类型定义包
  直接运行下面的命令，安装iView的TypeScript类型声明：

  npm install @types/iview --save-dev
  

  如果这个包找不到或者安装后还是有问题，就试试第二个办法。

• 办法2：手动写类型声明
  在src目录下新建一个iview-shims.d.ts文件，把下面的内容放进去：

  declare module 'iview' {
    import Vue from 'vue';
    const iView: typeof Vue & {
      // 要是需要用到iView的全局组件/方法，比如Message、Button，可以在这里补充类型，示例：
      // Message: { success: (msg: string) => void };
    };
    export default iView;
  }
  

  这个文件会告诉TypeScript“iview模块是个啥”，编译器就不会再报错啦。

第二个问题：import 'iview/dist/styles/iview.css' 导入失败 #

这个问题本质是webpack没配置好处理单独CSS文件的能力——typescript-vue-starter默认只处理.vue文件里的样式，单独导入的CSS它不认。解决步骤如下：

1. 先装必要的loader：

   npm install css-loader style-loader --save-dev
   

2. 打开你的webpack.config.js，在module.rules数组里加一条规则：

   {
     test: /\.css$/,
     use: [
       'style-loader',
       'css-loader'
     ]
   }
   

   这样webpack就能正确解析并加载单独导入的CSS文件了。

最后再检查下这几点 #

• 确认你已经装了iView本体：npm install iview --save
• 重启一下开发服务器或者TypeScript编译器，有时候改了类型声明或webpack配置，得重启才会生效

内容的提问来源于stack exchange，提问作者Chris Bao