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

Question

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

所以在我的vue应用程序中，我把公共路径作为myvueapp

在vue.config.js：

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

它在子路径中工作，当我做vue-cli-service服务时。但是当我构建和使用资产时，它不起作用。我构建后我去了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/ 。