webpack 踩坑之 path publicPath

最新推荐文章于 2024-03-05 11:07:49 发布
最新推荐文章于 2024-03-05 11:07:49 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangfeng1742/article/details/84940892
本文解析了VueCli项目中Webpack配置的path和publicPath作用。path定义了输出文件的绝对目标路径，而publicPath则设定了HTML页面引用资源的基础路径前缀。深入理解这两个概念有助于更高效地进行前端资源管理。

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

咋们以 Vue Cli 为例，介绍一下 webpack 配置的中的 path 和 publicPath：

path： 所有输出文件的目标路径，必须是绝对路径（使用 node.js 的 path 模块）

如上图，项目打包后，输出文件在 dist 目录下

 

publicPath： 引用文件的路径前缀，url 相对于 HTML 页面

如上图，指定了资源的基础路径 "/" 和子路径 "static"

publicPath 只是为项目中引入的资源指定一个基础路径

 

占坑：https://www.cnblogs.com/bydzhangxiaowei/p/8972662.html

https://webpack.docschina.org/guides/public-path/

webpack中output中path和publicPath区别详解
反手一个bug的博客
04-26 1739
文章目录前言正文path和publicPath的定义path和publicPath的区别利用publicPath区分不同环境资源路径小结 前言         webpack是目前比较主流的前端打包工具，其中output属性中有两个类似的配置项，path和publicPath，这一章我们来看看他们之间的区别 正文 path和publicPath的定义 path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。 publi
Webpack path与publicPath的区别详解
12-10
前言 在webpack模块化开发的过程中，发现webpack.config.js配置文件的输出路径总有一个path与publicPath，不解其意。 module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "What should I put here?" } } 正文 官方解释 publicPath: The output.path from the view of the Javascript / HTML page. 从JS/H
【无标题】Webpack中publicPath详解
qq_30436011的博客
10-25 5139
关于webpack中的path。
webpack path publicpath 的区别
doctorone的博客
04-04 470
一般情况的打包目录： path: index.html xx/app.js xx/main.css xx/logo.png path：是打包文件 本地输出目录 publicpath：在服务器上的发布目录（建议绝对路径，相对路径也可以，但是注意的是相对index.html服务器发布目录）app.js 会渲染进入 index.html ...
webpack中output之path和publicPath详解
热门推荐
祥哥的说
06-09 2万+
path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。publicPath:输出解析文件的目录，指定资源文件引用的目录 ，打包后浏览器访问服务时的 url 路径中通用的一部分。区别：path是webpack所有文件的输出的路径，必须是绝对路径，比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目...
webpack的path、publicPath和 devServer 的publicPath、contentBase
Dailoge的博客
10-26 2610
webpack path 文档描述 默认值：process.cwd() output.path目录对应一个绝对路径， 最后 path 会输出到物理硬盘上的。 const path = require('path'); module.exports = { //... output: { path: path.resolve(__dirname, 'dist/assets') } }; publicPath 文档描述 默认值：空字符串 此选项指定在浏览.
Webpack中publicPath路径问题详解
12-10
最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。 output output选项指定webpack输出的位置，其中比较重要的也是经常用到的有 path 和 publicPath output.path 默认值： process.cwd() output.path 只是指示输出的目录，对应一个 绝对路径 ，例如在项目中通常会做如下配置： output: { path: path.resolve(__dirna
webpack中的path、publicPath、contentBase的区分
青天诀的专栏
10-23 6735
output.publicPath & devServer.publicPath output里面的publicPath表示的是打包生成的index.html文件里面引用资源的前缀； devServer里面的publicPath表示的是打包生成的静态文件所在的位置（若是devServer里面的publicPath没有设置，则会认为是output里面设置的publicPath的值）； 两...
Vue.config文件里边的publicPath的配置使用
最新发布
2201_75705263的博客
03-05 8905
如果你的项目里面的静态文件都放在public文件中，那么使用的时候要使用publicPath这个变量，防止打包后静态文件找不到；你需要通过绝对路径来引用它们。因为：任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack；相当于打包过后的路径上多一个文件夹的名字。
关于webpack的path和publicPath。
weixin_30404405的博客
05-27 283
path:所有输出文件的目标路径; publicPath:输出解析文件的目录，url 相对于 HTML 页面 区别：path是webpack所有文件的输出的路径，必须是绝对路径，比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目录下 module.exports={ entry:...
vue（2）-配置（2）publicPath‘./’和‘/’的区别
qq_42440919的博客
12-14 9336
一、含义 ‘./’表示相对路径，表示当前目录下的 ‘/’表示绝对路径，表示根目录下的。 二、build后 正式环境：打包后的类似<scriptsrc="static/js/index.752b9949.js"> 测试环境：scripttype="text/javascript"src="/static/js/index.js"> 三、配置 不推荐：publicPath:process.env.NODE_ENV==="production"?"./":"/"...
vue打包assetsPublicPath为‘./‘和‘/abc/‘的两种情况
qq_44021541的博客
06-01 2957
vue 测试 和正式环境打包 （npm run build） assetsPublicPath路径可以设置为大致两种在nginx代理的方式也各有差异 第一种: assetsPublicPath: ‘ ./’ location / { root /home/lw/hy/admin/dist; index index.html index.htm; autoindex on; expires 30m; } 第二种: assetsPublicPath: ‘/qbcd/’
webpack的output中path和publicPath的区别
nieling3的博客
02-05 275
webpack的path和publicPath区别
devServer.publicPath、output.publicPath 和 output.path 的意义的阐述
song854601134的博客
05-13 1292
devServer.publicPath、output.publicPath 和 output.path 的意义的阐述 经过一番测试，终于猜出了这几个字段合乎我测试结果的意义，暂时解决了它们给我带来的困惑，我打算先从 devServer.publicPath 这个字段说起，这样我觉得比较好讲明白一点儿，然后再说 output.publicPath 这个牵扯部分稍微多一点的字段，最后以最简单的 output.path 收尾。 devServer.publicPath 我们知道 devServer 这个字段只在
webpack之publicPath
coding...
05-06 5009
前言：本文解决了《 webpack之输出路径处理 》最后预留的路径问题正文：要解决《 webpack之输出路径处理 》最后预留的路径问题，只需要在webpack.config.js的output选项中添加publicPath配置。执行npm run build，在浏览器打开dist/index.html文件，所有资源均正常加载！但是，现在执行npm run dev，浏览器打开的http://loc...
浅谈webpack配置中output的publicPath属性和devServer的publicPath属性
dcwang316的博客
12-12 3516
长期以来，一直都比较迷惑，不知道publicPath属性的作用，最近抽空，花了点时间研究了下，参考了几篇文档，自己测试了几遍，最后得出了以下几点心得，如有不对，欢迎佐证。 1.当手动创建html时，也就是当我们的工程中，存在一个index.html 工程结构 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;me...
vue-cli3搭建项目之webpack配置
怎么办我好菜啊
01-24 3427
vue-cli3搭建项目之webpack配置 一、vue.config.js文件 const path = require('path') module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 lintOnSave: false, // eslint-loader 是否在保存的时候检查 // see https://github.com/vuejs/vue-cli/blob/dev/docs/we
Vue CLI4.0 webpack配置属性——publicPath
Jay的博客
04-28 1万+
publicPath Type: string Default: '/' 官方文档说明： 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。 默认情况下，Vue CLI 会假设你...
webpack publicpath
04-06
webpack的publicpath是一个配置项，用于指定浏览器在加载静态资源时从哪个路径加载。在webpack配置中，可以通过设置output.publicPath来指定public path。例如，如果设置为"/assets/"，则在浏览器中加载静态资源时将从域名后面的"/assets/"路径开始加载。公共路径的设置可以帮助解决文件引用路径错误的问题，同时也可以提高静态资源的加载速度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值