解决vue单页面应用打包后相对路径、绝对路径相关问题
在项目开发过程中，在部署过程中，用到了反向代理，这就要求前端代码中不能使用绝对路径。但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子来看一下：
1、打包后的index.html文件
2、打包后的css文件
所以，如果在项目中需要使用相对路径来获取静态的资源文件，需要怎么做呢？
1、修改webpack配置文件中的assetsPublicPath，修改为如下图所示。
修改配置后，进行打包发现，打包后的index.html文件中，对css等文件的调用，变成相对路径。
但是同时我们也会的发现这样修改后，导致打包后的css文件中，图片的路径出现问题，如下所示，图片路径出错导致图片找不到。
所以仍需进一步修改配置，使其变成如下路径：
.iradio_flat-yellow{background-image:url(../../static/img/yellow@2x.04850a2.png);
2、 处理图片路径问题
在webpack对ExtractTextPlugin插件配置的地方，加入如下代码（具体值可能有变化，依据自身项目打包后文件路径关系确定）
再次打包，发现问题解决！
补充知识：Vue-cli 2打包静态文件夹static打包路径报错，开发中使用绝对路径，打包后部署到二级目录，绝对路径没用改变。
在开发中，如果使用绝对路径在运行测试环境是没用任何问题的
但是在打包后，路径是回安装原来写的路径完全不改变的搬过去。
那么在部署在二级目录下，读取根目录肯定会报错
解决办法：在开发中使用相对路径
主要文件
config->index.js
build->assetsPublicPath: '/二级目录/'
最后的斜线很重要不能省略
static静态文件
build->utils.js exports.html" target="_blank">cssLoaders下的function generateLoaders if (options.extract) { return ExtractTextPlugin.extract({
里面添加publicPath: '/二级目录/'中间写二级路径地址，后面的也是斜线很重要，不能省略
以上这篇解决vue单页面应用打包后相对路径、绝对路径相关问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
问题内容： 如果使用绝对路径，则无法将整个目录移动到新位置。如果使用相对路径，则无法将单个文件移动到新位置。 这里有什么解决方案？您是否设置了一个包含根路径并从那里开始的配置文件？还是您有类似的规则：永不移动文件？ 我在某些项目中看到人们使用dirname（ FILE ）。我的意思是，为什么不简单地将其删除，因为目录名还是相对的（取决于文件所在的位置）？ 问题答案： 您应该使用一个配置文件，该配置
-
主要内容：什么是当前工作目录,什么是绝对路径与相对路径,Python处理绝对路径和相对路径在介绍绝对路径和相对路径之前，先要了解一下什么是当前工作目录。 什么是当前工作目录 每个运行在计算机上的程序，都有一个“当前工作目录”（或 cwd）。所有没有从根文件夹开始的文件名或路径，都假定在当前工作目录下。 注意，虽然文件夹是目录的更新的名称，但当前工作目录（或当前目录）是标准术语，没有当前工作文件夹这种说法。 在 Python 中，利用 os.getcwd() 函数可以取得当前工作路径的字
-
在 Linux 中，简单的理解一个文件的路径，指的就是该文件存放的位置，例如，在《 Linux文件系统的层次结构》中提到的 /home/cat 就表示的是 cat 文件所存放的位置。只要我们告诉 Linux 系统某个文件存放的准确位置，那么它就可以找到这个文件。 指明一个文件存放的位置，有 2 种方法，分别是使用 绝对路径和 相对路径。 我们知道，Linux 系统中所有的文件（目录）都被组织成以根
-
本文向大家介绍Linux 相对路径和绝对路径的使用，包括了Linux 相对路径和绝对路径的使用的使用技巧和注意事项，需要的朋友参考一下 01. 概述 绝对路径和相对路径在shell环境中经常遇到，各有用处。有时候相对路径比较方便，有时候绝对路径比较方便。 02. 绝对路径(Absolute Pathname) 绝对路径必定由**/**开头 绝对路径是为档案/文件的所在位置做指向 在任何时候，都可以
-
问题内容： 我有文件A的绝对路径。 我有一个从文件A的目录到文件B的相对路径。此路径可以并且将使用“ ..”以任意复杂的方式向上移动目录结构。 范例A： 示例B： 我如何结合这两者以获得 最简单的 绝对路径到文件B？ 问题答案： 如果我的问题正确，那么您可以执行以下操作：
-
我有以下问题。当我想在我的Gradle依赖项中使用一个本地jar时。 如果我只是补充一句： 不管用. C:\users\kai\androidStudioProjects\projecta\app\src\main\Java\de\xyz\xxx\projecta\baseActivity.Java:21:错误：包com.pushlink.android不存在导入com.pushlink.andr