Webpack打包路径问题

最新推荐文章于 2024-06-27 10:11:01 发布
最新推荐文章于 2024-06-27 10:11:01 发布
阅读量2.6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thinshootout/article/details/89088362
版权

Webpack打包路径缺省为绝对路径。

如果想把打包路径改为相对自定义路径，对于build环境(即最终一般会部署到proxy后)，需要修改config/index.js中的build段中的assetsPublicPath即可。

... ...
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
... ...

关于这个assetsPublicPath，再多说两句。

不论assetsPublicPath设置成绝对路径还是相对路径，在我们的js文件中我们自己引入的任何URL，不管是script标签的src属性，还是img标签的src属性，如果URL是绝对路径，压缩打包后生成文件中对应URL就是绝对路径；如果URL是相对路径，压缩打包后生成文件中对应URL就是相对路径。也就是说，assetsPublicPath不会修改代码中既有URL路径。

那么assetsPublicPath影响什么URL呢？assetsPublicPath影响的是：Webpack最终自动在index.html中插入的，由Webpack自动压缩打包生成的js引用的URL。

举例来说，如果assetsPublicPath设为'/'(缺省行为)，则最终的index.html中会包含形如：

<body>
... ...
<!-- 不是我们自己写的代码哦，是Webpack压缩打包后自动在代码中插入的 -->
<script type=text/javascript src=./static/js/app.e9385f9da30ed4834acc.js></script>
... ...
</body>

如果assetsPublicPath设为'./'，则最终的index.html中会包含形如：

<body>
... ...
<script type=text/javascript src=./static/js/app.e9385f9da30ed4834acc.js></script>
... ...
</body>

关于assetsPublicPath言尽于此。

对于dev环境(即启动Node.js服务)，只修改config/index.js中的dev段中的assetsPublicPath是不行的，还需要将build/webpack.dev.conf.js中devServer段中的publicPath改为'/'。

... ...
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: '/',
... ...

 

thinshootout
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack打包vue项目，资源从绝对路径改为相对路径以及css中的图片资源如何修改配置
起个类名好难的博客
05-01 1315
转载 https://www.cnblogs.com/LChenglong/p/10309501.html
使用Webpack对JS文件进行打包构建并在配置文件中指定打包路径
01-08
一、介绍 Webpack 简称模块打包机 在一个Web项目中 会引入很多文件 例如css文件 js文件 字体文件 图片文件 模板文件 等 引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系 Webpack是前端的一个项目构建工具 基于Node.js开发 因此 若要使用webpack 必须先安装Node.js 借助Webpack这个前端自动化构建工具 可以完美实现资源的合并 打包 压缩 混淆等诸多功能 示意图： 官网：https://webpack.github.io 二、安装 在新版本中 需要分开安装webpack和webpack-cli 安装web
webpack 打包配置
最新发布
这个人很懒~
06-27 542
处理html、css、js、vue、jsx、图片等文件、压缩处理好的文件、分割压缩好的文件、路由懒加载、开启缓存和热更新、开启多线程打包
webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
weixin_33921089的博客
09-04 544
资源相对引用路径 问题描述 一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。 但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。 解决办法 打开webpack.prod.conf.js 找到output：增加 ...
配置 webpack的打包路径
热门推荐
weixin_39090097的博客
07-27 1万+
  在 src 目录下面 新建一个 webpack.config.js 文件  按照图示 设置 需要打包的文件 ，配置打包后输出到哪个文件及路径  配置完成以后，直接在终端 输入 webpack 就会实现自动打包，小伙伴赶紧动手试一下 如果说 我们想要 我们一修改文件，不用我们手动打包，就想让我们 修改的文件生效 1、可以在 package.json 文件中配置 dev: webpa...
Webpack打包生成相对路径的资源引用
weixin_34007879的博客
03-30 1635
2019独角兽企业重金招聘Python工程师标准>>> ...
VUE webpack 打包 页面间的用相对路径
u012174809的专栏
11-24 1492
webpack相对路径打包
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
浅谈webpack打包过程中因为图片的路径导致的问题
08-28
浅谈webpack打包过程中因为图片的路径导致的问题 在本文中，我们将讨论webpack打包过程中因为图片的路径导致的问题，并提供相应的解决方案。 1. 问题背景 在使用webpack打包时，我们可能会遇到图片路径的问题。...
完美解决webpack打包css背景图片路径问题
11-20
本文将详细解析如何解决Webpack打包CSS背景图片路径问题。 首先，让我们分析问题所在。在Vue组件的样式部分，我们可能会写入如下的CSS代码： ```css background-image: url("../assets/img/icon_add.png"); ``` 在...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
然而，在实际的项目开发过程中，可能会遇到一些问题，比如在本例中提到的`iconfont`图标文件路径问题。 `iconfont`是一种流行的在线图标服务，允许开发者将图标作为Web字体来使用，从而实现响应式和易于维护的图标...
vue和webpack打包项目相对路径修改的方法
08-27
主要介绍了vue和webpack打包项目相对路径修改的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Webpack中publicPath路径问题详解
08-27
主要介绍了Webpack中publicPath路径问题详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack修改打包入口文件的路径
weixin_50680057的博客
10-15 1977
webpack的默认打包入口文件为src/index.js，默认输出文件路径为dist/main.js，想要修改入口文件时，只需打开webpack.config.js修改entry命令行代码即可。
webpack该如何打包
m0_72174711的博客
12-08 312
webpack该如何打包。
继上文webpack打包上线找不到静态资源(publicPath)
weixin_47426048的博客
04-28 2474
webpack 配置 publicPath的理解 　　在学习webpack的时候，配置文件中有一个publicPath属性，一直不是很明白它到底是怎么用，也查了很多资料，得到最多的说法是当打包的时候，webpack会在静态文件路径前面添加publicPath的值，当我们把资源放到CDN上的时候，把publicPath的值设为CDN的值就可以了。但是在使用webpack 进行开发的时候，得到的结果却和该说法不是很一致，经过一段时间的摸索，好像是懂了一点点，至少在简单的配置中不会报错，在这里记一下，做一个总结.
vue和webpack打包 项目相对路径修改
u010794797的博客
07-09 3409
般vue使用webpack打包是整个工程的根目录，但是很多情况下都是把vue打包后的文件在某子目录下修改：1，打开index.jsassetsPublicPath:'/'  改为：assetsPublicPath: './'2.解决css里面的路径问题，打开utils.js添加红色框参数即可 参考：https://www.cnblogs.com/davidcdh/p/8556748.html...
publicPath给webpack打包文件路径前添加公共域名
weixin_45966674的博客
01-28 986
可能我们要访问的文件 都在某个服务器上那我们就可以配置webpack.config.js中 module.exports下的output下的属性publicPath为公共地址 这里以http:localhost:8080/为例 module.exports = { output: { //配置文件路径前的公共地址 publicPath: 'http:localhost:8080/' }, } 我们在打包时就会发现 文件前都被加上了http:localhost:80
vue webpack 打包路径
06-07
Vue CLI 使用 Webpack 进行打包，打包后的文件默认会生成到 dist 目录下。如果需要修改打包后的文件路径，可以在 vue.config.js 中进行配置。 例如，如果想要将打包后的文件生成到 dist/static 目录下，可以在 vue.config.js 中添加以下配置： ```js module.exports = { outputDir: 'dist/static' } ``` 这样打包后的文件就会生成到 dist/static 目录下了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值