(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{421:function(a,e,t){a.exports=t.p+"assets/img/some_relation.40bc4cf5.png"},565:function(a,e,t){"use strict";t.r(e);var n=t(17),s=Object(n.a)({},(function(){var a=this,e=a.$createElement,n=a._self._c||e;return n("ContentSlotsDistributor",{attrs:{"slot-key":a.$parent.slotKey}},[n("h1",{attrs:{id:"项目上线指南"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#项目上线指南"}},[a._v("#")]),a._v(" 项目上线指南")]),a._v(" "),n("h2",{attrs:{id:"是否添加-polyfill"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#是否添加-polyfill"}},[a._v("#")]),a._v(" 是否添加 polyfill")]),a._v(" "),n("p",[a._v("CML 框架中 js 代码都是经过了 babel 编译，但是 babel 默认只转换语法，而不处理新的 API，例如"),n("code",[a._v("Object.assign,Object.entries")]),a._v("。如果"),n("b",[a._v("项目中使用了一些不经过 babel 的 API，并且线上产品需要兼容低版本系统的手机")]),a._v("，CML 提供了在各端添加 polyfill 的配置 参见 "),n("RouterLink",{attrs:{to:"/docs/config.html#babelpolyfill"}},[a._v("babelPolyfill")]),a._v("。")],1),a._v(" "),n("h2",{attrs:{id:"静态资源发布路径"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#静态资源发布路径"}},[a._v("#")]),a._v(" 静态资源发布路径")]),a._v(" "),n("p",[a._v("静态资源发布路径 "),n("b",[a._v("是配合项目静态资源最终线上地址")]),a._v(",设置方法参见"),n("RouterLink",{attrs:{to:"/docs/config.html#babelpolyfill"}},[a._v("资源发布路径")]),a._v("。\n例如： 项目中引用了一个本地图片：")],1),a._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[a._v('<template>\n  <view class="scroller-wrap">\n    <image src="{{chameleonSrc}}"></image>\n  </view>\n</template>\n\n<script>\n\nclass Index  {\n  data = {\n    chameleonSrc: require(\'../../images/images/chameleon.png\')\n  }\n}\n')])])]),n("p",[a._v("该图片执行 cml web build 打包到本地 "),n("code",[a._v("web/static/img/chameleon_83ee00e.png")]),a._v(";\n如果预计将该静态资源上线到"),n("code",[a._v("https://static.cml.js/vender")]),a._v("下，例如图片线上地址"),n("code",[a._v("https://static.cml.js/vender/web/static/img/chameleon_83ee00e.png")]),a._v("。\n则应该将 publicPath 设置为"),n("code",[a._v("https://static.cml.com/vender")]),a._v("后执行"),n("code",[a._v("cml web build")]),a._v("。")]),a._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[a._v('cml.config.merge({\n  web: {\n    build: {\n      publicPath: "https://static.cml.com/vender"\n    }\n  }\n});\n')])])]),n("p",[a._v("这样代码中的图片地址线上就能够正确访问。 同理适用于 Web 端 html 页面中注入的"),n("code",[a._v("link和script")]),a._v("标签。")]),a._v(" "),n("h3",{attrs:{id:"小程序中的静态资源上线"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#小程序中的静态资源上线"}},[a._v("#")]),a._v(" 小程序中的静态资源上线")]),a._v(" "),n("p",[a._v("由于小程序有包大小的限制，所有建议打包出的静态资源单独上线，不放在小程序包中，chameleon-tool@0.3.1 版本在 dev 模式也默认将图片的地址改成本地 web 服务器访问的地址，解决 css 中 background-image 不能使用本地图片的问题。")]),a._v(" "),n("p",[a._v("如果不将静态资源单独上线，注意要将 publicPath 设置为"),n("code",[a._v("/")]),a._v("，例如：")]),a._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[a._v('cml.config.merge({\n  wx: {\n    build: {\n      publicPath: "/"\n    }\n  }\n});\n')])])]),n("p",[n("b",[a._v("注：百度小程序中必须将静态资源单独上线, 因为不支持静态资源的")]),a._v("。")]),a._v(" "),n("h2",{attrs:{id:"api-请求前缀"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#api-请求前缀"}},[a._v("#")]),a._v(" API 请求前缀")]),a._v(" "),n("p",[a._v("请求前缀的配置可以灵活的控制项目中所有 ajax 请求的服务器地址，上线时记得将其改成正确的线上地址。具体讲解参见 "),n("RouterLink",{attrs:{to:"/docs/config.html#api-请求前缀"}},[a._v("API 请求前缀")]),a._v("和 "),n("RouterLink",{attrs:{to:"/docs/config.html#domain-多域名请求前缀"}},[a._v("Domain 多域名请求前缀")]),a._v("。")],1),a._v(" "),n("h2",{attrs:{id:"web-端的路由模式"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#web-端的路由模式"}},[a._v("#")]),a._v(" Web 端的路由模式")]),a._v(" "),n("p",[a._v("很多人将 Web 端的 html 页面上线之后访问是空白页面。就是没有注意 Web 端路由模式。Web 端路由模式分为 "),n("code",[a._v("history")]),a._v(" 和 "),n("code",[a._v("hash")]),a._v("，在项目的 "),n("code",[a._v("src/router.config.json")]),a._v(" 中配置。如果 Web 端的页面没有后端服务提供路由，那么应该路由设置成 "),n("code",[a._v("hash")]),a._v(" 模式，然后用页面地址+hash 值访问到相应的页面。"),n("code",[a._v("history")]),a._v(" 模式适用于有后端路由服务，访问设置的路由可以返回该 html 页面。\n例如路由如下：")]),a._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[a._v('{\n  "mode": "hash",\n  "routes":[\n    {\n      "url": "/cml/h5/index",\n      "path": "/pages/index/index",\n      "name": "首页",\n      "mock": "index.php"\n    },\n    {\n      "url": "/cml/login/index",\n      "path": "/pages/index/index",\n      "name": "首页",\n      "mock": "index.php"\n    }\n  ]\n}\n')])])]),n("p",[a._v("如果最终线上地址为"),n("code",[a._v("https://static.cml.com/project/page1.html")]),a._v(",则两个页面访问地址为\n"),n("code",[a._v("https://static.cml.com/project/page1.html#/cml/h5/index")]),a._v(" 和\n"),n("code",[a._v("https://static.cml.com/project/page1.html#/cml/login/index")]),a._v("。")]),a._v(" "),n("p",[a._v("如果直接访问"),n("code",[a._v("https://static.cml.com/project/page1.html")]),a._v(" 则会寻找路由为/的页面\n"),n("code",[a._v("https://static.cml.com/project/page1.html#/")])]),a._v(" "),n("h2",{attrs:{id:"跨端-cmlurl-与-config-json-的关系"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#跨端-cmlurl-与-config-json-的关系"}},[a._v("#")]),a._v(" 跨端 cmlUrl 与 config.json 的关系")]),a._v(" "),n("p",[a._v("跨端项目之间的跳转，CML 提供的解决方式是使用 "),n("code",[a._v("cml.open()")]),a._v(" 方法传入统一的 cmlUrl，cmlUrl 地址的生成就是需要根据项目 build 模式打包出的"),n("code",[a._v("config.json")]),a._v("信息。\n例如：")]),a._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[a._v('[\n    {\n        "wx": {\n            "appId": "wx_appid",\n            "path": "/pages/index/index"\n        },\n        "baidu": {\n            "appId": "baidu_appid",\n            "path": "/pages/index/index"\n        },\n        "alipay": {\n            "appId": "alipay_app_id",\n            "path": "/pages/index/index"\n\n        "web": {\n            "url": "https://www.chameleon.com/index.html#/cml/h5/index"\n        },\n        "weex": {\n            "url": "https://static.cml.com/vender/weex/test2_dba27fda9a7f49fae912.js",\n            "query": {\n                "path": "/pages/index/index"\n            }\n        }\n    }\n]\n')])])]),n("p",[n("code",[a._v("config.json")]),a._v(" 中包含了每一个页面在各端的访问路径信息，用户可以根据这些信息拼接成 cmlUrl，由后端下发给页面进行跳转。")]),a._v(" "),n("p",[a._v("weex 信息构成：")]),a._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[a._v('"weex": {\n  "url": "https://static.cml.com/vender/weex/test2_dba27fda9a7f49fae912.js",\n  "query": {\n      "path": "/pages/index/index"\n  }\n}\n')])])]),n("p",[a._v("url 是根据 publichPath 决定\nquery 中 path 信息是"),n("code",[a._v("router.config.json")]),a._v("中的 path。")]),a._v(" "),n("p",[a._v("web 信息构成：")]),a._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[a._v('"web": {\n    "url": "https://www.chameleon.com/index.html#/cml/h5/index"\n},\n')])])]),n("p",[a._v("url 是根据"),n("code",[a._v("router.config.json")]),a._v("中设置的 domain 拼接 path 构成。domain 是这个页面的最终线上地址，和 publichPath 不一样，publicPath 只是前缀。")]),a._v(" "),n("ul",[n("li",[n("b",[a._v("注: "),n("code",[a._v("router.config.json")]),a._v("中的 domain 指定页面最终线上地址，只是用于 config.json 的生成,真正决定 web 页面访问地址的还是取决于 web 服务器的配置。 而配置文件中的 publicPath 是指定静态资源线上地址的前缀。")])])]),a._v(" "),n("p",[a._v("小程序信息的构成：")]),a._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[a._v('"wx": {\n    "appId": "wx_appid",\n    "path": "/pages/index/index"\n},\n"baidu": {\n    "appId": "baidu_appid",\n    "path": "/pages/index/index"\n},\n"alipay": {\n    "appId": "alipay_app_id",\n    "path": "/pages/index/index"\n}\n')])])]),n("p",[a._v("小程序的地址由 appId 和 path 构成，appId 来自于 chameleon.config.js 中的 buildInfo 的设置。")]),a._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[a._v("cml.config.merge({\n  buildInfo: {\n    wxAppId: 'wx_appid',\n    baiduAppId: 'baidu_appid',\n    alipayAppId: 'alipay_app_id'\n  }\n})\n")])])]),n("h2",{attrs:{id:"apiprefix、publicpath、router-config-json、cmlurl-的关系"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#apiprefix、publicpath、router-config-json、cmlurl-的关系"}},[a._v("#")]),a._v(" apiPrefix、publicPath、router.config.json、cmlUrl 的关系")]),a._v(" "),n("img",{attrs:{src:t(421)}}),a._v(" "),n("h2",{attrs:{id:"微信小程序分包加载"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#微信小程序分包加载"}},[a._v("#")]),a._v(" 微信小程序分包加载")]),a._v(" "),n("p",[a._v("参见 "),n("RouterLink",{attrs:{to:"/tutorial/bundle-splitting.html"}},[a._v("使用分包")])],1)])}),[],!1,null,null,null);e.default=s.exports}}]);