angular2 打包后如何静态部署

如何打包

点我查看

tomcat 部署

tomcat官网传送门，首先需要下载一个tomcat，然后启动。

cd ng2project ~/tomcat/webapps
将ng2项目里生成的dist 文件夹 拷贝到 tomcat 目录下的webapps下

查看ng2项目运行情况
http://localhost/8080/dist

从错误可以看出是找不到对应的js导致页面无法顺利加载
cd tomcat/webapps/dist
vi index.html

修改前
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

调整后
<script type="text/javascript" src="dist/inline.bundle.js"></script>
<script type="text/javascript" src="dist/polyfills.bundle.js"></script>
<script type="text/javascript" src="dist/styles.bundle.js"></script>
<script type="text/javascript" src="dist/vendor.bundle.js"></script>
<script type="text/javascript" src="dist/main.bundle.js"></script>

这样调整比较麻烦，每次webpack编译后还要修改index.html很不方便。感谢我们使用了webpack。

打开webpack.config.js
"output": { "publicPath": "dist/", --添加这一句后，webpack后就会自动帮你加上dist/ //"publicPath": "http://192.168.1.82:8080/dist/", --还可以直接指向某个域名或者服务器下的js "path": path.join(process.cwd(), "dist"), "filename": "[name].bundle.js", "chunkFilename": "[id].chunk.js" },

Thanks