vue-cli自定义路径、router重定向、JS和CSS导入的差异

vue-router的重定向

    {
      path: '/',
      redirect: '/recommend'
    },

redirect之后放字符串的path即可

自定义路径

在文件引入的时候使用../../的方法很是麻烦，这里介绍一个使用自定义路径引入文件的方法：

在vue.config.vue中定义

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'common': '@/common',
        'components': '@/components'
      }
    }
  }
}

这样使用common的时候就会自动指向common文件夹了。

原理是vuecli对@进行了定义，相当于src文件夹，源码⬇️

node_modules/@vue/cli-service/lib/config/base.js

    webpackConfig.resolve
      .extensions
        .merge(['.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'])
        .end()
      .modules
        .add('node_modules