vue + ts 踩坑

1.img使用@报错，import中使用正常

lssue中提出的方案：在url前加 ~ 标记 <img src="~@/assets/logo.png" />

2. Property 'volume' does not exist on type 'Vue'

ts.png

解决方式是：加 as HTMLAudioElement(接口) 类型断言声明audio为audiohtml元素

3.v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

（1）v-for 遍历必须为 item 添加 key

在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。（vue默认使用index为key，并没有优化，所以避免使用index）
（2）v-for 遍历避免同时使用 v-if

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。

4.事件的销毁

Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。如果在 js 内使用 addEventListene 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露

4.第三方插件的按需引入

我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。以下为项目中引入 element-ui 组件库为例：
(1) 安装

npm install babel-plugin-component -D
复制代码

(2) bable.config.js中加入下述代码

plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ]

(3) 按需导入

import { Button, Select } from 'element-ui';
//scrollbar.d.ts
import {VNodeDireactive} from 'vue'
export interface ElScrollbar extends VNodeDireactive {
  name: 'scrollbar',
  value: Function
}

//element-ui.d.ts
import {ElScrollbar} from './scrollbar'
export const Scrollbar: PluginObject<ElScrollbar>

5.Object is possibly 'null'.

啊啊啊.png

1)类型断言
在this.comments后加感叹号：但是会出现报错 Forbidden non-null assertion.不建议

this.comment!

2）类型(保护)判断：判断不为null再使用变量 .推荐

if (this.comments != null) {
//代码
}

6.# Vue.prototype绑定的属性方法，能够调用到，但是编译报错

解决方法：
添加vue.d.ts 文件
重启VS Code 错误消失了。

// main.ts
Vue.prototype.$eventBus = new Vue()

// vue.d.ts
import Vue from 'vue'
declare module 'vue/types/vue' {
  // 3. 声明为 Vue 补充的东西
  interface Vue {
    $eventBus: Vue
  }
}

7.# vue-cli创建项打包后打开页面为空白的问题解决

1）文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。
解决：在vue.config.js中加入下面代码

//vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '././' : '/'
  // publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}

2）router-view中的内容显示不出来。路由history模式。
这个坑是当你使用了路由之后，在没有后端配合的情况下就手贱打开路由history模式的时候，打包出来的文件也会是一片空白的情况，
解决：在 router.js 中将 mode: history注释掉
另一种方法就是使用history模式，但需要服务器配置 uniCloud参考官方参考

//router.js
const router = new VueRouter({
  // mode: 'history',  注释
  base: process.env.BASE_URL,
  routes
})

8.Vue 打包优化方案

1）路由懒加载

//import Song '@/views/index.vue' 原先的引入方式
{
  path: '',
  // component: Song, 改为下面写法
  component: () => import('../views/Song/index.vue'),
  meta: { keepAlive: false }
}

2）使用cdn
public目录下index.html
<% if(process.env.NODE_ENV === 'production') { %><% } %>用来判断是生产环境

<% if(process.env.NODE_ENV === 'production') { %>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<% } %>

在 vue.config.js 配置 externals

module.exports = {
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        externals: {
          'vue': 'Vue',
          'vue-router': 'VueRouter',
          'vuex': 'Vuex',
          'axios': 'axios',
          'element-ui': 'ELEMENT'
        }
      }
    }
  }
}