/和./和../的区别以及webpack(vue)路径配置

最新推荐文章于 2024-05-30 10:30:00 发布
最新推荐文章于 2024-05-30 10:30:00 发布
阅读量451 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： webpack 文章标签： 路径
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dengzihao1023/article/details/88187372
本文深入讲解webpack中根目录、当前目录及父级目录的配置方法，帮助开发者掌握vue项目中路径的快速定位与使用技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

/：根目录

./：当前目录

../:父级目录

 

webpack(vue)配置快捷路径

细说webpack-dev-server --inline --progress --config build/webpack.dev.conf.js的一二三
changyandou2020的博客
08-10 1374
在vue-cli的脚手架创建后开发环境调试下webpack-dev-server是如何读取webpack.dev.conf.js中的内容的
Vue3解决“找不到模块“@/components/xxx.vue”或其相应的类型声明”
热门推荐
qq_43657722的博客
05-22 1万+
在使用 Vue 3 开发项目时，遇到“找不到模块 ‘@/components/xxx.vue’ 或其相应的类型声明”的错误是一个常见问题。这通常与 TypeScript 和模块解析相关的配置不当有关。本文将详细介绍如何解决此问题，确保你的项目能够正确识别和导入 Vue 组件。
webpack/vue-cli 中的 publicPath / 和 ./ 的区别
Jioho的博客
09-27 9435
webpack/vue-cli 中的 publicPath / 和 ./ 的区别 在说这个问题之前，vue-cli 的配置文档已经说的非常清楚了 publicPath 而 webpack 对于 publicPath 的描述相对苍白。但是 vue-cli 对于我们来说也是一个黑盒子，我们只知道 publicPath 可以配置'',./ 或者 /my-app/ 这种自定义 URL。但是，你真的理解 webpack 里面的 publicPath 吗？ 准备环境 nginx 模拟一个真实的 URL 和高仿真项目
js webpack 配置路径_vue使用webpack配置路径别名
weixin_42287518的博客
12-23 256
原始的文件引用方式的缺点要拼写一个巨长无比的字符串，而且每引用一次都要拼写一次。如果这个文件位置变了，我就要把所有引用它的文件都修改一次。下面介绍一种很优雅的方式，使用webpack的resolve.alias。以下面的目录结构为例：-src-components-navBar.vue-main.js复制代码vue-cli 2.0 中如何使用？在vue-cli 2.0的工程中，在\build\we...
Vue学习笔记——前端工程化
weixin_45655555的博客
09-27 182
Vue学习笔记——前端工程化 目标： ES6 模块化的基本语法 按需导入 与 按需导出 这个时候 导入的名称不可以随意取，要与你导出的名字一致 2. webpack （小demo） webpack的基本使用 1. 创建列表隔行变色项目 新建项目空白目录，并运行 npm init -y 命令，初始化 包管理配置文件 package.json 新建 src 源代码目录 新建 src -> index.html 首页 初始化首页基本的结构 运行 npm install jquery -s 命令，安装jQ
Webpack cl5 vue.config.js配置【性能优化】
Mr. Zhang Xiaojian's Blog
12-11 934
【代码】Webpack cl4 配置。打正式包去掉注释/黄色警告/console.logautoprefixer 样式自动添加浏览器前缀：配置路径别名
Vue项目中../路径./路径@/路径~@/路径的区别
weixin_44524835的博客
01-15 3847
…/ 表示父级目录下 ./ 表示当前目录下 @/ 是webpack/build/webpack.base.conf.js中配置的路径别名 ~ @/中的 ~ 代表根目录，~@即根目录下的配置为@的路径
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
10-14
5. **build** - 包含Webpack配置，用于处理项目构建，区分开发环境和生产环境的配置。 **main.js** - 这是Vue应用的启动文件，也是项目的入口点。在这个文件中，我们导入Vue库，创建一个新的Vue实例，并挂载到HTML...
vue没有build/webpack.base.conf.js
最新发布
06-12
2.文件缺失：现代VueCLI创建的项目（VueCLI3+）默认隐藏了Webpack配置，因此没有`build/webpack.base.conf.js`文件。配置通常通过`vue.config.js`文件进行覆盖。解决方案：###1.确认视图组件的实际路径首先，检查`...
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/systemOps/systemManage/updateInfo?userId=liujinxu". at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2009:15) at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1979:15) at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2272:18) at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2204:8) at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2545:10) at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2964:22) at new Promise (<anonymous>) at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2963:12) at VueComponent.handleNodeClick (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/systemOps/systemManage/userManage/userManage.vue?vue&type=script&lang=js:141:57)
06-08
location).catch(err=>err)}```或者，如果你需要处理带有onResolve和onReject参数的情况（引用4）：```javascriptconstoriginalPush=VueRouter.prototype.pushVueRouter.prototype.push=functionpush(location,...
webpack配置路径快捷方式，文件引用后缀过滤
李知恩李知金
04-18 647
resolve: { alias: { "@": path.join(__dirname,"src"), // 目录快捷方式配置 }, extensions: [".js", ".ts", ".jsx", ".tsx", ".json"],//以上文件引入可以省略后缀名 }
配置/更改vue项目中的资源路径 && ./和../的区别
anji7380的博客
10-22 464
一. 配置/更改vue项目中的资源路径 在vue 开发项目中需要对路径进行设置。最简单的就是设置为绝对路径。 1. 找到项目中的build文件夹下的webpack.base.conf.js，在module.exports .resolve .alias下自定义： 2. 然后就可以在js中直接使用assets/xxx或components/x...
./img、../img 和@/在vue中区别 路径区别
q77777_7的博客
04-14 586
在 Vue.js 中，路径的引用方式对于正确地定位资源文件（如图片、组件、样式等）是非常重要的。在编写 Vue 项目时，建议根据项目的结构和需求选择合适的路径引用方式。可以提高代码的可读性和可维护性，特别是在大型项目中。
【vue】@、@/、../和./的区别
天亮就睡
05-30 1435
源自https://www.cnblogs.com/cyfeng/p/11928255.html。：在build文件夹下webpack.base.conf.js找到@，便能知道@代表什么了;：表示vue语法中v-on的简写；绑定事件的专用格式。当事件触发的时候，函数才会来调用；这里指向src文件夹。: 表示父级目录。
Vue中路径的 “@/“ 和 “./“ 的区别
UserGuan的博客
12-08 5610
./：表示相对路径，代表当前目录下的同级目录，遵从的是从后往前找文件 @：等价于 /src 这个目录，遵从的是从前往后找，是为了避免麻烦又怕写错的相对路径的简写 因为在根目录/build/webpack.base.conf.js文件中配置过 @ 的 resolve: { extensions: ['.js', '.vue', '.json'], alias: { ......
vue路径使用方法及自定义路径介绍
coldriversnow的专栏
11-25 5544
1.首先说根目录 根目录用“/” 2. 当前文件夹 ./当前文件同级目录 3.当前文件夹的上一级 …/当前文件上一级目录 4.自定义目录 说明下 之前的vue是在webpack.base.conf.js 文件里配置的在这里直接加入就可以 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/胜利ue.esm.js', '@': resolve('src'), } }, 现在需要在v...
vue项目打包需要修改的路径问题
知其白，守其黑；和其光，同其尘。
03-09 6437
博客园 首页 新随笔 联系 管理 订阅订阅 随笔- 55 文章- 0 评论- 1 vue-cli项目打包需要修改的路径问题 命令行输入：npm run build 打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。 第一个问题，文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问...
webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
weixin_33921089的博客
09-04 596
资源相对引用路径 问题描述 一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。 但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。 解决办法 打开webpack.prod.conf.js 找到output：增加 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值