Vue+Typescript踩坑记录

简述

近日项目技术选型为Vue+Typescript,终于也得体验一把typescript的强大,
其相关依赖库版本如下,截止今日皆为最新版本号:

一、项目相关配置在哪里写?

由于采用vue-cli@3.x版本来初始化工程,所以没有了2.x版本对外暴露的webpack配置文件,所以如果相对项目进行一些配置,需要在项目根目录下新建vue.config.js.

比如需要修改项目启动的端口号,去掉打包后文件名的哈希值,如下:

如果需要将项目配置在服务器子级目录中,则需:

二、配置完路由后,无法在组件中使用this.$route和this.$router

一般如此相像的问题需要修改src目录下shims-vue.d.ts文件

下面是组件中监听路由变化代码

上面直接使用是没有问题的,问题在组件中写组件的路由钩子发现不会触发.如下:

解决方法就需要用到Component下的registerHooks方法,如下:

注册完毕后可使用

三、vuex辅助方法取消,换而使用vuex-class注解方式使用

  • 比如使用 @State 来获取状态
  • 比如使用 @Action 来获取动作

具体可见 vuex-class

下面以@State为例

第一个问题有以下三种解决方法

  1. 修改tsconfig.json文件,在compilerOptions选项中加入"strictPropertyInitialization": false
  2. 修改@State写法为@State private count!: number;,里面加了!感叹号,表示我会给你赋值的,别担心.但是这种方式虽然代码正常运行,IDE却报错,对于强迫症的我们不能忍啊,于是乎继续寻找其他方法
  3. 依然修改@State的写法为@State private count: number|any;,在后面加上number|any,表示是数字或者任意值当然包括undefined

四、前后端合并代码图片资源找不到(404)

  • 这种情况一般都是图片访问的路径不正确
  • 一般我们的项目部署后不会放到服务器根目录,而是会创建一个子目录放进去,比如放到/child子目录里面
  • 前端打包完毕后所有的资源在dist目录下,这是图片的正确访问路径为/child/dist/img/logo.png,而图片资源打包完成后实际访问路径为/img/logo.png
  • 因此需要修改图片的正确访问路径,由于基于webpack对图片进行打包的,所以需要修改一下vue.config.jswebpack配置项,主要修改url-loader中的publicPath选项

后续使用有问题会在此继续补充!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复