vue文件打包后的路径不对,webpack 静态资源路径

　　本文主要介绍了vue项目的webpack打包静态资源路径不准确的问题及解决方法，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

webpack打包静态资源路径不准确

问题

　　1.把打包好的项目部署到服务器，发现一个错误说图片找不到了。

　　2.js等静态资源无法访问

　　分析并且解决问题

　　明确地说，当您看到错误404时，您找不到静态资源。显然，路径是错误的。

静态资源找不到如js文件

　　资源的打包路径有错误，打包的资源使用绝对根路径。因此，当项目部署到特定目录时，无法正确解析引入的资源路径。

　　解决：

　　在config下找到index.js文件，并将带下划线的行改为如下内容。

　　之前是根目录，所以找不到文件。我们可以把它改成一个相对目录。打包后看看index.html引进的档案就知道变化了。

图片找不到

　　首先，让我们看看打包后生成的文件目录：

　　以上错误，如果没有static/css，完全可以找到图片。但是为什么有的图能找到，有的却找不到？同样的方法写在css文件里。在这里，我们将看看webpack在打包我们的文件时做了什么。

　　webpack打包limit限制

　　极限值是10000，这意味着字节。有什么作用？它小于这个字节限制。不是不打包，而是转换成Base64(CSS样式下，图片的代码变成一堆字符)。如果大于，就正常打包，用7位哈希值，就变成下面这个路径。

　　我去了下img，img这个名字是我们上面的webpack配置的。所以路径不对，所以找不到图片。

　　从源头分析问题

　　在vue项目中，我们打包生成项目，运行命令如下。

　　npm运行构建

　　因此，让我们先来看看执行这个命令时运行的代码。在config下找到index.js文件

　　打包后生成的文件代码：

　　起初，我们的assetsPublicPath值是/，这意味着根目录。让我们看看打包后的文件是什么样的。

　　这样的话，如果我们直接从根目录获取，我们会用一个名字把项目部署到服务器上，这样就不能直接从服务器的根目录获取了。

　　解决图片路径错误办法

　　在构建文件夹下找到utils.js文件，如下所示

　　添加红色部分，使包看起来像././static，可以解决我们的问题。

webpack中的静态资源处理

　　您可能已经注意到，在我们的项目结构中，有两条路径指向静态文件：src/assets和static/这两个有什么区别？

Webpacked 资源

　　要回答这个问题，我们首先需要了解webpack是如何处理静态资源的。在*。vue组件，所有的模板和css都会被vue-html-loader和css-loader解析，找到资源的URL。例如，在img src=中。/logo.png 和背景：URL(。/logo.png)，”。/logo.png ，都是相对资源路径，会被Webpack解析成模块依赖关系。

　　因为logo.png不是JavaScript，当它被视为模块依赖时，我们需要使用url-loader和file-loader来处理它。模板已经用这些加载器进行了配置，所以当您可以使用相对/模块路径时，您不需要担心部署。(这个样板文件已经为您配置了这些加载器，所以您基本上可以免费获得文件名指纹和条件base64内联等特性，同时能够使用相对/模块路径，而不用担心部署。)

　　由于这些资源可能在构建时被内联/复制/重命名，它们本质上是源代码的一部分。这就是为什么我们建议将webpack处理的静态资源像其他源文件一样放在/src路径下。实际上，您甚至不需要将它们都放在/src/assets路径中：您可以根据模块/组件的使用来组织文件结构。例如，您可以将每个组件及其静态资源放在它自己的目录中。

资源处理规则

　　URL URL，例如。/assets/logo.png，将被解释为模块依赖。它们将被基于您的Webpack输出配置自动生成的URL所取代。没有前缀URL的URL(如assets/logo.png)将被视为相对URL，并被转换为。/assets/logo.png前缀加~会被视为模块请求，类似require(some-module/image.png )。如果您想使用Webpack的模块来处理配置，可以使用这个前缀。比如你有一个资产的路径解析，你需要使用img src=~assets/logo.png 来保证解析是对应的。将不处理根目录URL的URL，例如/assets/logo.png。

在JavaScript里获取资源路径

　　为了让Webpack返回正确的资源路径，需要使用require(。/relative/path/to/file.jpg )，由file-loader解析，然后返回处理后的URL。例如：

　　计算值：{

　　背景(){

　　要求退货(。/bgs/ this.id 。jpg’)

　　}

"真实的" 静态资源

　　相比之下，static/下的所有文件都不会被Webpack处理：它们使用相同的文件名，并被直接复制到最终路径。根据config.js中添加的build.assetsPublicPath和build . assets子目录，必须使用绝对路径来引用这些文件

　　例如，以下默认值是：

　　注意，上面的例子将包含。最终版本中的/bgs/path。这是因为Webpack无法猜测运行时会使用哪一个，所以会包含所有的。

　　//config/索引. js

　　模块.导出={

　　//.

　　构建：{

　　assets public path:“/”，

　　资产子目录：“静态”

　　}

　　应该使用绝对URL/static/[filename]来引用放置在static/目录中的所有文件。如果将assetSubDirectory的值更改为assets，这些URL将变成/assets/[filename]

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录