vue CLI 3 公共路径部署在网络服务器中

Question

我们的vue 应用程序必须以相对路径部署在网络服务器中...类似于student.com/myvueapp/

所以在我的vue 应用程序中，我将公共路径设置为myvueapp

在vue.config.js：

 module.exports = {
      publicPath: '/myvueapp/'
    }

它在子路径中工作，当我做 vue-cli-service serve 时。但是当我构建和使用资产时，它不起作用。一世 我在构建后去了dist 目录并运行python -m SimpleHTTPServer 8000 它失败了。

我应该如何解决它？我应该设置公共路径以外的其他属性吗？ 我把它放到我们的开发服务器 nginx 中，但它也不起作用。

Answer 1

build 任务只会构建应用的根目录。不过，文件中的路径对于您配置的publicPath 来说是正确的，例如

<!-- in dist/index.html -->
<script src=/myvueapp/js/app.0fcf91de.js></script>

这个想法是您获取 dist 文件夹的内容并将其部署到生产 HTTP 服务器上的 $DOCUMENT_ROOT/myvueapp/。

例如，如果你的 NGINX 配置有

root /usr/share/nginx/html;

您将创建目录/usr/share/nginx/html/myvueapp 并将dist 的内容复制到其中。

---

如果您尝试在本地运行它，您仍然需要为您的publicPath 手动创建一个文件夹（或符号链接）。

# in some directory

# create a symlink
ln -s path/to/your/app/dist myvueapp
# or create a real folder, eg
# mkdir myvueapp && cp -a path/to/your/app/dist/* myvueapp/

# start your server
python -m SimpleHTTPServer

然后打开http://localhost:8000/myvueapp/。