引入typescript踩坑计（完）

Posted 2022-12-04 suedarsam

前段时间在项目中引入了typescript，当时遇到了一些坑，总结了一篇文章, 没有想到还有2.0版本，因为不过这次的坑是由于要解决要引入typescript所必须的webpakc4而引入vue-cli导致的。

路由问题

访问路径

原先的项目访问路由部署在/platform/下，也就是说，在production环境中，只有在形如[host]:[port]/platform/[...]的路由下才能访问到开发路径。在vue.config.js的publicPath可以进行相应的更改。

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

但是，事实上，直接在router中也可以配置，就是麻烦了一点。

mode

如果在vue2中的vue-router中使用了history mode迁移到vue-cli3是会有路径问题的，导致了路由一直导向404页面，我们需要在router中加入对应的基地址。

// router.js
export default new Router(
    mode: 'history',
    base: '/platform/',
    ...
)

因为路由部署在/platform/下，所以基地址是platform，如果是直接部署在[host]上，设置为base: '/'。

输出路径

假如在原先的webpack中定义了输出路径放在static中。

// config/index.js

    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    ...

那么相对应的，vue3应该这么设置。

// vue.config.js
module.exports = 
    assetsDir: 'static',
    ...