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'