I introduced typescript in the project a while back and ran into a few pits and summarized an article that I didn’t expect to see 2.0, because this pit was due to vue-CLI being introduced to address webpakC4, which is necessary to implement typescript.

Routing problem

Access path

The original project access route is deployed under /platform/, that is, in the Production environment, only when the form [host]:[port]/platform/[…] To access the development path. The publicPath in vue.config.js can be changed accordingly.

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

However, the fact that it can be configured directly on the Router is a bit more troublesome.

mode

If the vue-router in VUe2 uses the history mode to migrate to vue-cli3, there will be a path problem, resulting in the route to the 404 page, we need to add the corresponding base address to the router.

// router.js
export default new Router({
    mode: 'history'.base: '/platform/'. })Copy the code

Because the route is deployed under /platform/, the base address is platform. If it is deployed directly on [host], set it to base: ‘/’.

The output path

Suppose the output path was defined in the original Webpack and placed in static.

// config/index.js
{
    assetsSubDirectory: 'static'.assetsPublicPath: '/'. }Copy the code

So vuE3 should be set up like this.

// vue.config.js
module.exports = {
    assetsDir: 'static'. }Copy the code