Question

我有Vue v2 SPA。这是标准的应用程序。设为the documentation中的hello-world。让我们进行构建：

vue create hello-world
cd hello-world
yarn install
yarn build

但是我有一个要求：应用程序必须嵌入（通过URL重写，而不是部署）到另一个站点：

在要求之前：https://site1.come/
要求之后：https://site2.come/path-toapp/ <-反向代理在这里重写了URL site1.com

但是应用程序的构建包含所有资产的绝对路径：

$ cat dist/index.html

<!DOCTYPE html>
<html lang=en>
<head>
...
<title>hello-world</title>
<link href=/css/app.fb0c6e1c.css rel=preload as=style>
<link href=/js/app.042151d6.js rel=preload as=script>
<link href=/js/chunk-vendors.f0b6743d.js rel=preload as=script>
<link href=/css/app.fb0c6e1c.css rel=stylesheet>
....

它破坏了第三方站点的重写。资源app.fb0c6e1c.css将来自：

https://site2.come/css/app.fb0c6e1c.css

代替：

https://site2.come/path-toapp/css/app.fb0c6e1c.css

我该如何解决问题？在vue的文档中找不到任何相关的配置。

我当然有解决方案。我可以使用bash重写CI脚本中的URL：

sed -i "s/\(src\|href\)=\//\1=/g" dist/index.html

但是上面的解决方案是一个hack，Web开发人员无法支持。因此，我正在寻找更重要的解决方案（例如，基于webpack的解决方案）。

Answer 1

您需要在项目根目录中创建一个vue.config.js文件，并设置Content-Transfer-Encoding选项：

module.exports = {
  publicPath: '/path-toapp/'
}

Vue：更新静态资产的路径

1 个答案: