如何配置@绝对路径
第一种 直接使用@
vue项目中默认定义了@(最常用)和vue$两个别名 , @这东西代表着到src这个文件夹的路径,
下面所属目录可以直接 @/views @/components @/store @/router @/assets
├── vue.config.js ├── package.json ├── babel.config.js ├── public └──index.html ├── src └── assets └── components └── store └── router └── view └── app.vue └── main.js
第二种 webpack.base.conf.js
在vue项目开发中经常引用JS、CSS、IMG文件。当项目较大时文件层级很多,导致路径很长,我们可以通过在bulid > webpack.base.conf.js 设置简便的引用路径
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), // add assets路径 给src/assets设置引用路径 assets 使用就是 "~assets" 'assets': resolve('src/assets'), // add static路径 给static设置引用路径 static 使用就是 "~static" 'static': path.resolve(__dirname, '../static'), },
注意事项,设置好引用路径,必须要重启项目才能生效。不然会报错 配置JS、CSS文件同样操作
第三种 vue.config.js配置
项目中使用引入文件有时候路径比较深,需要使用"…/…/…/xx.js"这种类似的路劲引入,这种方式比较笨,可以使用webpack的别名alias配置来解决。
首先,先确定node_modules项目中是否有path模块, 如果没有path模块需要先安装path
npm install path --save
以下为vue.config.js配置
const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { chainWebpack: config => { config.resolve.alias .set("@", resolve("src")) .set("@assets", resolve("src/assets")) .set("@components", resolve("src/components")) .set("@base", resolve("baseConfig")) .set("@public", resolve("public")); }, }
vue路径写法:./ 和 @/
vue在引用路径的时候可以用 ./ 的写法引用如下:
import './api/index'
这个代表在相同文件下绝对路径的意思。
项目中还有常见的@用法
import Background from '@/assets/images/background.jpg'
这个@是在 webpack.base.conf.js (vue.config.js)文件里配置的:
configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name: name, resolve: { alias: { '@': resolve('src'), '@crud': resolve('src/components/Crud') } } },
这里的@就代表是 src,所以就在 src 路径下找文件,也可以自己配置,这也是常见的路径写法!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。