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'