入门极速传送门：一个基于vue-cli4.0+Typescript+SSR的小Demo最终效果：访问，返回html片段，将vue依赖与chunks分离VueSSRDemo使用Vue-cli4.0+Typescript+SSR如何说说小demo，从vue3开始，之前的build目录没有了。如果要修改webpack配置，只能在根目录下新建vue.config.js文件。具体修改请参考vue-cli官网。我用的是vue-cli2.+，这次直接升级到vue-cli4.+，直接上TS。踩了很多坑，还好我挺过来了。分享一下我的项目demo已经实现：项目搭建搭建本地ssr开发环境（koa）使用Vuex实现数据预取（已经实现，但demo中删除了该功能）打包chunk分离优化Jenkins+Docker持续集成，部署，集成到后??端项目（egg.js）中主要是命令$npminstall#安装依赖$npmrundev#本地开发├──8080本地非ssr环境└──3000本地ssr环境$npmrunbuild#windows下打包命令$npmrunbuild:linux#linux下打包命令项目目录┌──.vscodeIDE工作区配置│└──settings.json├──dist#静态资源（自动生成）│└──index.temp.html#ssr模板文件├──public#静态目录，打包├──server#koa服务│├──index.js#koa入口│└──server.js#服务逻辑├──src#主要源码│├──api#请求管理││└──api.config.ts接口管理││└──axios.config.ts拦截器管理│├──assets#resources││└──......│├──plugins#plugins││└──......│├──utils#全局方法等││└──......│├──views#页面/视图││└──......│├──App.vue#EntryVue│├──entry-client.ts#客户端入口│├──entry-server.ts#服务器入口│├──main#公共入口│├──router.index.ts#路由配置│├──store.index.ts#Vuex配置│├──vue-shim.d.ts#ts模块声明└──.browserslistrc#浏览器设置└──.eslintrc.js#eslintrc设置└──.gitignore#git忽略└──babel.config.js#babel配置└──Jenkinsfile#jenkins配置└──package-lock.json#版本锁└──package.json#项目依赖└──tsconfig.json#ts配置文件└──vue.config.js#webpack配置文件webpack配置文件解析1关闭css分离extract:false,//at目前css还没有分离出来，正在努力搭建本地ssr环境。webpack-dev-server运行本地服务时，会打包一次，进行热更新，所以思路是再启动一个节点服务，读取监听打包后的chunk文件进行ssr操作，这里有两点-设置webpack-dev-servetoallowcross-domainheaders:{'Access-Control-Allow-Origin':'*'},--setpublicPath//添加端口前缀可以访问静态资源。生产环境是OK的，因为集成到后台工程设置和路径中。process.env.NODE_ENV!=='生产'?'http://localhost:8080':'/',3Separatingchunkstoreducepackagingvolume//可以分离大部分依赖，使打包后的chunk更小//客户端生产环境只能分离externals://可以分离大部分的依赖关系，使打包的块更小process.env.NODE_ENV==='生产'&&!TARGET_NODE?{vue:'Vue',}:undefined,4注入版本信息newwebpack.DefinePlugin({'process.env.NODE_ENV':`"${process.env.NODE_ENV||'development'}"`,//注意那需要使用双引号}),5closesplitChunkschainWebpack:(config)=>{config.optimization.splitChunks(undefined);},ssr基本上构建了1个公共入口main。ts//为了防止单例污染，需要导出一个工厂函数exportfunctioncreateApp():any{constrouter=createRouter();conststore=createStore();constapp=newVue({router,store,render:(h)=>h(App),});return{app,router,store};}2客户端入口entry-client.ts//挂载到appconst{app,router}=createApp();router.onReady(()=>{app.$mount('#app');});3serverentryentry-server.ts//匹配路由，需要返回一个promise，因为可能是异步组件，如果没有匹配到，则返回404import{createApp}from'./main';exportdefault(context:any)=>newPromise((resolve,reject)=>{const{app,router}=createApp();router.push(context.url);router.onReady(()=>{constmatchedComponents=router.getMatchedComponents();如果(!matchedComponents.length){返回拒绝({代码:404,});}解决（应用程序）；},reject);});4routingrouter.index.ts//注意mode要改成history这样路由请求才能到后端exportfunctioncreateRouter(){returnnewRouter({mode:'history',routes:[{path:'/',name:'Home',component:()=>import(/*webpackChunkName:"Home"*/'./views/Home.vue'),},{路径:'/about',name:'About',component:()=>import(/*webpackChunkName:"about"*/'./views/About.vue'),},],});}5是注意不要在组件的mountedhook之前进行dom相关的操作，因为server会执行这些hooks6实现本地ssr——读取web-dev-server打包的chunk并实时监控——当chunk发生变化时，使用'vue-server-renderer'的renderToString将其渲染成html字符串7在本地ssr环境下，接口转发问题//虽然可以配置devServer代理，但是ssr环境在另一个节点端口下，接口需要要转发-标准化interface，并在接口类的请求中加上'/api'前缀——在koaserver.js下，匹配接口类请求，使用'http-proxy-middleware'和'koa2-connect'作为接口转发参考文献带你五步学会VueSSR
