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')
        .add(api.resolve('node_modules'))
        .add(resolveLocal('node_modules'))
        .end()
      .alias
        .set('@', api.resolve('src'))
        .set(
          'vue$',
          options.runtimeCompiler
            ? 'vue/dist/vue.esm.js'
            : 'vue/dist/vue.runtime.esm.js'
        )

这里也可以通过chainWebpack函数和require，resolve来设置文件路径。

style标签和script标签内引入模块的差异

css的引入：

@import '~common/stylus/XXXXXXX';

// 或者

@import '~@/common/stylus/XXXXXXX';

js的引入：

import XXX from 'components/XXX'

// 或者

import XXX from '@/components/XXX'