vue中配置@绝对路径
vue中配置@绝对路径
·
vue中配置@绝对路径
第一种:直接使用@
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"));
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)