vue配置绝对路径

vue.config.js里加一行chainWebpack配置，置绝就能让项目里那堆@/components变成components/。对路这事我折腾了半小时，置绝最后发现官方文档写得跟天书似的对路，不如直接抄代码来得快。置绝

先看最常见的对路写法。在项目根目录的置绝vue.config.js里，加上这么一段：

const path = require('path') module.exports = {  chainWebpack: config => {  config.resolve.alias .set('@',对路 path.resolve(__dirname, 'src')) } } 

这段代码的意思是，把@这个符号，置绝映射到src目录的对路绝对路径。之后你写import Header from '@/components/Header.vue'，置绝webpack编译时会自动替换成import Header from '/你的对路项目路径/src/components/Header.vue'。省去一层层../../往上爬的置绝痛苦。

但这里有个坑。对路如果你用的置绝是TypeScript，光改vue.config.js不够。tsconfig.json里也得同步改，不然IDE会报红。在compilerOptions里加：

"baseUrl": ".", "paths": {  "@/*": ["src/*"] } 

两个文件都配好，编辑器才不会发神经。我上次忘了改tsconfig，VSCode一路标红，还以为代码写错了，排查半天才发现是路径别名没同步。

还有种情况，你项目里用了vue-cli-service但没装vue.config.js这个文件。那就得手动建一个，放在根目录。别放错地方，放错位置webpack根本不读。

配置完记得重启dev server。热更新有时候不生效，它不会自动重新加载webpack配置。我习惯改完配置直接Ctrl+C再npm run serve，干净利落。

有人会问，为什么不用configureWebpack？那是个对象写法，也能配alias。但chainWebpack更灵活，能链式调用，以后想加别的loader或插件，直接.set()接上去就行。用configureWebpack的话，改起来要整个对象覆盖，麻烦。

配完绝对路径最直观的感受是，再也不用数../有几个了。从src/views/user/Profile.vue里引用src/utils/format.js，以前写../../utils/format，现在写@/utils/format。代码搬位置的时候，相对路径全断，绝对路径纹丝不动。这省下的不只是敲键盘的时间，是排查路径错误的精神损耗。

最后提醒一句，别把@定义成node_modules的路径。有人图省事把@映射到根目录，结果第三方库和本地代码混在一起，找bug的时候怀疑人生。老老实实指到src就行，够用了。