美文网首页
angular2 打包后如何静态部署

angular2 打包后如何静态部署

作者: 金木研_45f1 | 来源:发表于2017-05-12 09:16 被阅读0次

    如何打包

    点我查看


    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

    相关文章

      网友评论

          本文标题:angular2 打包后如何静态部署

          本文链接:https://www.haomeiwen.com/subject/vzcztxtx.html