在 vue cli 项目中获取静态资产的 404答案

【问题标题】：Getting 404 for static assets in vue cli project在 vue cli 项目中获取静态资产的 404
【发布时间】：2018-05-24 01:53:56
【问题描述】：

我发现使用 vue webpack 模板部署项目很困难。我们在我们的服务器中使用 nginx 为 Laravel 应用程序提供服务。所以打开 www.example.com 服务于我们的 laravel 安装。现在我想使用www.example.com/lite 来提供应用程序的精简版，这是一个带有vue-webpack 模板的SPA 版本。为此，我在我们的 nginx 配置中创建了一个位置块

location /lite {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                #try_files $uri $uri/ =404;
                index  index.html index.htm;
                alias /var/www/html/crm-lite/dist;
                try_files $uri $uri/ /index.html;
        }

我在build/index.js 中将assetsPublicPath 更改为assetsPublicPath: '/lite'；但是当我在浏览器中打开它时，我得到 404 not found 的静态资产。网址看起来像这样http://example.com/lite/static/js/app.3c11ea8ceff19f8f33ff.js

如果我将dist/ 文件夹的内容复制到我们的文档根目录并仅使用IP 地址打开它，它就可以正常工作。我缺少任何配置吗？感谢您的帮助。

【问题讨论】：

我猜你对以.js 结尾的URI 有一个冲突的location 块。尝试改用：location ^~ /lite { ... }。

标签： laravel nginx vue.js

【解决方案1】：

我发现，别名不是移动页面的非常可靠的方法；但它确实提供了将静态请求重定向到父级之外的另一个文件夹的独特功能，这很好。

在弄清楚发生了什么之前，我对您的配置进行了一些操作：您错过了目录路径中的尾随 /。（PS，你不需要 try_files 或 index 指令）

试试这个：

location /lite {
    alias /var/www/html/crm-lite/dist/;
}

【讨论】：