Angular 4 打包并发布

项目基于Angular CLI,一个命令行界面工具搭建

在项目开发完成之后,在打包发布地方遇到了问题,之前一直使用angularjs开发,至于新的Angular 4却是还未接触,这次的项目,选择了Angular 4,随之而来的便是一个跨越式的变化。

相比于angularjs直接引用文件发布而言,Angular 4的打包发布却是没有那么一清二白了

从官方文档中,

一种是通过nodejs环境发布,

另一种便是通过打包方式发布。

以下为打包方式:

通过命令行

ng build --prod --aot

会生成dist文件夹,将dist文件夹中的文件,直接上传到服务器便可访问,

本以为这样子就可以了,但是很快就发现一个新的问题,通过域名,直接访问,无论进入哪个路由页面,都没有问题,但是当刷新页面的时候,却是会返回一个404的错误页面,

错误的原因,应该是,路由解析错误的问题,

服务器为php环境:

通过查询,找到一个解决方案,在服务器中添加一个重定向文件(.htaccess),即可,文件内容如下

RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

服务器环境为nginx:

配置如下:

server {
	……
	location / {
		……
		index  index.html;
		try_files $uri $uri/ /index.html;
	}
}


前端交流群:468103283

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值