vue中配置@绝对路径

最新推荐文章于 2024-04-24 09:04:35 发布

一天不写代码就难受的小金

最新推荐文章于 2024-04-24 09:04:35 发布

阅读量4k

点赞数 1

分类专栏： vue 文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/qq_46016217/article/details/127330465

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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"));
  },
}