前段时间在项目中引入了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',
...
}