publicPath：打包时的配置

最新推荐文章于 2024-05-27 23:13:20 发布
最新推荐文章于 2024-05-27 23:13:20 发布
阅读量521 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37899792/article/details/133379226
版权

vue项目，执行打包命令后，会在项目的根目录中自动创建一个文件夹dist,dist中的文件就是打包后的文件，只需要放到服务器中即可。

【默认情况下，用的绝对路径，需要放到服务器的根目录打开。】

如果希望放到子目录也能运行或者双击运行，需要把publicPath配置成相对路径 ，如下图所示：

默认情况下打包后的index.html引入情况如下 

经过   publicPath：'./'   配置之后

有蝉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【关于webpack中的publicPath】
qmy960502的博客
01-12 2784
说道说道webpack的publicPath
Vue-cli assets SubDirectory及PublicPath区别详解
10-14
在开发过程中，我们经常需要处理静态资源的路径问题，特别是当项目涉及到前后端分离时。`assetsSubDirectory` 和 `assetsPublicPath` 是 Vue CLI 中两个重要的配置选项，它们决定了应用中静态资源的组织和访问方式。...
Webpack中publicPath路径问题详解
08-27
主要介绍了Webpack中publicPath路径问题详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue.config文件里边的publicPath的配置使用
2201_75705263的博客
03-05 4349
如果你的项目里面的静态文件都放在public文件中，那么使用的时候要使用publicPath这个变量，防止打包后静态文件找不到；你需要通过绝对路径来引用它们。因为：任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack；相当于打包过后的路径上多一个文件夹的名字。
前端 JS 经典：vue 开发中的 base 和 publicPath
最新发布
weixin_64684095的博客
05-27 1974
不知各位小伙伴有没有遇到过这样的问题，就是本地开发的好好的，结果打包后自信满满的交给运维部署，一上线，就是页面资源找不到了，跳转页面白屏了。等各种问题，这大概率就是配置问题。有这么两个配置 base 和 publicPath, 这个两个配置在 vue2 和 vue3 的表现形式不同，下面会详细介绍。这两个配置一般影响的是生成环境，对本地开发没啥影响。
vue - vue中的publicPath讲解
qq_43886365的博客
12-19 8775
vue中的publicPath讲解
vue之解析vue.config.js的配置项之publicPath
qq_40278396的博客
06-15 2831
一般在vue项目当中，都有一个vue.config.js，一个可选的配置文件，之前总是再用，但对于其中的配置项具体的用途了解少之又少，所以准备对此文件常用的配置项或webpack插件做一下记录。publicPath配置成'/aaa/bbb/ccc'， 则需在相应的服务器路径中新建aaa>bbb>ccc的文件夹，然后将打包后的文件放进去。publicPath字段的用途。官网上的描述如下图所述。
vue配置文件中的 publicPath和路由里的配置参数base的作用及区别
DLGDark的博客
01-12 4241
一个针对的是项目部署的路径问题，一个针对的是页面路由url的路径问题，缺一不可。基础路由路径，会导致整个路由路径不对，所以，这里配置完后，每次重新登录或刷新页面都不会出现找不到页面的问题，刷新也不会出现url不对的问题。路径，如果是在history路由模式下，一般需要在服务器配置项目页面访问路径，否则刷新页面会出现404，找不到路径页面。这里面的base参数，在hash模式下，一般不需要配置，默认跟路由，如果在history模式下，由于项目配置了。，项目这里则需要与服务器上配置的项目路径保持一致，故。
Vue CLI 设置 publicPath：打包后的应用可部署在任意路径
前端技术
12-21 3362
Vue CLI 设置 publicPath：打包后的应用可部署在任意路径
webpack学习教程之publicPath路径问题详解
12-08
在深入探讨Webpack的`publicPath`配置之前，我们先来理解一下Webpack的基本概念。Webpack是一个模块打包工具，它将各种类型的资源（JavaScript、CSS、图片等）视为模块，并通过配置和插件将其打包成可部署的静态资源...
基于vue-cli 打包时抽离项目相关配置文件详解
08-27
在使用Vue CLI构建项目时，有时需要将特定的配置文件从打包过程中抽离出来，以实现灵活的项目部署和管理。Vue CLI是一个强大的脚手架工具，它集成了Webpack和其他必要的构建工具，允许开发者快速搭建Vue.js应用。...
webpack打包常用配置项
09-05
其中，`path` 是输出目录，`filename` 指定每个入口对应的输出文件名，`publicPath` 用于指定资源 URL 的基础路径。 ### 3. `module` `module` 配置是 Webpack 处理模块的核心部分，通过 `rules` 数组定义了不同...
vue2的打包事项（publicPath路径），部署在域名子路径上
insist_life的博客
06-18 4546
/ 例如 https://www.ruoyi.vip/。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions。// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件。$/i, // 压缩文件格式。
将前端vue项目部署到nginx中，vue中publicPath自动拼接一个路径
cjy1575944940的博客
08-22 4150
将原本部署在tomcat中的vue项目改成部署在nginx中。强调了vue.config.js里的publicPath对nginx配置的影响，修改访问路径后vue配置以及nginx配置都需要修改
vue-cli设置publicPath几种方式对比
whylost
06-11 1万+
publicPath打包设置 1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/' // vue.config.js module.exports = { publicPath: '/', } html中被打包的css和js路径如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-U
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 会假设你...
nginx部署vue项目,给访问路径加前缀的方法：vue.config.js配置publicPath和nginx配置alias
字节叔叔
04-18 7874
本文主要涉及到 Vue.js 项目部署在 Nginx 上的相关问题。其中，publicPath 选项可以用于设置 Vue.js 项目的访问路径前缀，alias 指令可以用于 Nginx 中将请求路径映射到指定的文件系统路径。同时，通过设置 Nginx 配置文件，可以将多个 Vue.js 项目部署在同一个域名下的不同路径中。使用 alias 指令可以更加方便地管理多个 Vue.js 项目，并使配置文件更加简洁易读。
vue打包路径和服务器配置
m0_67593693的博客
06-27 1498
【代码】vue打包路径和服务器配置。
vue（2）-配置（2）publicPath‘./’和‘/’的区别
qq_42440919的博客
12-14 8555
一、含义 ‘./’表示相对路径，表示当前目录下的 ‘/’表示绝对路径，表示根目录下的。 二、build后 正式环境：打包后的类似<scriptsrc="static/js/index.752b9949.js"> 测试环境：scripttype="text/javascript"src="/static/js/index.js"> 三、配置 不推荐：publicPath:process.env.NODE_ENV==="production"?"./":"/"...
react项目打包修改publicPath
05-11
在 React 项目中，可以通过修改 `webpack` 配置中的 `publicPath` 属性来改变打包后静态文件的路径。具体步骤如下： 1. 打开 `webpack.config.js` 文件，找到 `output` 配置项。 2. 在 `output` 配置项中添加 `publicPath` 属性，例如： ``` output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/my-app/' } ``` 其中，`publicPath` 的值为你想要设置的静态文件路径。 3. 重新运行 `npm run build` 命令打包项目。 在上述步骤完成后，打包后生成的静态文件路径就会被修改为你设置的路径。如果你想要将静态文件放到根目录下，可以将 `publicPath` 的值设置为 `/`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值