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

时间:2017-12-10 10:03:39

标签: laravel nginx vue.js

我发现使用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;
        }

我已在assetsPublicPath中将assetsPublicPath: '/lite'更改为build/index.js;但是当我在浏览时打开它时,我发现静态资产找不到404。该网址看起来像http://example.com/lite/static/js/app.3c11ea8ceff19f8f33ff.js

如果我将dist/文件夹的内容复制到我们的文档根目录中,并仅用ip地址打开它,它可以正常工作。我缺少任何配置吗?谢谢你的帮助。

1 个答案:

答案 0 :(得分:0)

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

在我弄清楚发生了什么之前,我使用了你的配置:你错过了目录路径中的尾随/。 (PS,你不需要try_files或索引指令)

试试这个:

<body>	
	<div class="grid-container">
		<div class="row">
		  <div class="col-4 col-m-6 responsive-margin-bottom">
			<div class="box primary">
				<h1>Primary Box</h1>
				<p>This is a paragraph</p>
			</div>
		  </div> <!-- 25% -->
		  <div class="col-8 col-m-6">
			<div class="box secondary">
				<h1>Secondary Box</h1>
				<p>This is a paragraph</p>
			</div>
		  </div> <!-- 75% -->
		</div>
	</div>
</body>