wp5更新完成

README.md

@@ -1,8 +1,16 @@
 # vue-project
 
-## node >= 10.13.0
+## vue2 + webpack5 支持功能
+- CSR预渲染
+- SSR同构
+- TS
+- 三种状态管理写法：vuex / vuex-ts写法 / mobx写法
 
-## Project setup
+各种写法都有demo
+
+### node >= 12+
+
+### Project setup
 
 ```
 yarn install
@@ -11,8 +19,8 @@ yarn install
 ### Compiles and hot-reloads for development
 
 ```
-- yarn mock
-- yarn serve
+- yarn mock （mock数据接口）
+- yarn dev
 ```
 
 ### Compiles and minifies for production
@@ -86,19 +94,14 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
 7. Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-
 
-8. [prerender-spa-plugin] Unable to prerender all routes!
--  Navigation failed because browser has disconnected!
-- 错误来源：@prerenderer -> renderer-puppeteer -> es6
+8. CSR 预渲染报错 [prerender-spa-plugin] Unable to prerender all routes!
+  [已提PR](https://github.com/chrisvfritz/prerender-spa-plugin/pull/415)
 
-9. - configuration has an unknown property 'postcss'. These properties are valid:
+9. configuration has an unknown property 'postcss'. These properties are valid:
 
 - https://stackoverflow.com/questions/40922052/webpack-error-configuration-has-an-unknown-property-postcss
 
 10. [预渲染配合 CDN](https://www.liangzl.com/get-article-detail-182141.html)
 
 11. ssr build BUG：需要改 vue-server-renderer 源码
-
-- server-plugin.js
-- build.dev.js
-
-12. ssr build 成功后，start，文件能正确返回请求内容和资源链接，但是页面并没有加载 CSS/JS 成功
+  [已提PR](https://github.com/vuejs/vue/pull/11814)

src/main.ts

@@ -1,8 +1,10 @@
 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
-import store from './store-vuex';
-// import storeTs from './store-vuex-ts';
+
+// 以下两种都可以使用
+// import store from './store-vuex';
+import store from './store-vuex-ts';
 
 // 设置为 false 以阻止 vue 在启动时生成生产提示
 Vue.config.productionTip = false;
@@ -36,13 +38,11 @@ router.beforeEach((to, from, next) => {
   console.log('路由导航守卫to', to);
   /* 路由发生变化修改页面title */
   if (to.meta.title) {
-    // document.title = to.meta.title;
+    document.title = to.meta.title;
   }
   next();
 });
 
-console.log('router', router);
-
 new Vue({
   router,
   store,

src/router/routes.ts

@@ -3,6 +3,8 @@ import VueRouter, { RouteConfig } from 'vue-router';
 import routeMobile from '../module-mobile/router';
 // import routePc from '../module-pc/router';
 
+import ComApp from '@/components/ComApp.vue';
+
 import Home from '../views/Home.vue';
 import Other from '../views/Other.vue';
 import Person from '../views/Person.vue';
@@ -11,7 +13,10 @@ const routes: Array<RouteConfig> = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
+    meta: {
+      title: 'VUE首页'
+    }
   },
   {
     path: '/about',
@@ -20,7 +25,10 @@ const routes: Array<RouteConfig> = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "about" */ '../views/About.vue')
+      import(/* webpackChunkName: "about" */ '../views/About.vue'),
+    meta: {
+      title: '关于',
+    }
   },
   routeMobile,
   {
@@ -31,15 +39,15 @@ const routes: Array<RouteConfig> = [
   {
     path: '/o',
     name: 'other',
-    // component: Home,
+    component: ComApp,
     children: [
       {
-        path: 'dodo',
+        path: 'todo',
         component: Other
       },
       {
         path: '',
-        component: Home
+        component: Other
       }
     ]
   }

src/store-vuex-ts/index.ts

@@ -32,4 +32,4 @@ export function createStore() {
   });
 }
 
-export default createStore;
+export default createStore();

src/views/Home.vue

@@ -1,23 +1,32 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <Grid>
+      <GridItem><router-link to="about">关于</router-link></GridItem>
+      <GridItem><router-link to="o">其他</router-link></GridItem>
+      <GridItem><router-link :to="{ name: 'person', params: { userId: 123 }}">关于参数1</router-link></GridItem>
+      <GridItem><router-link :to="{ path: 'person', query: { plan: 'private' }}">关于参数2</router-link></GridItem>
+      <GridItem><router-link to="m">移动端首页</router-link></GridItem>
+      <GridItem><router-link to="o/todo">其他todo</router-link></GridItem>
+    </Grid>
     <Menu />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
+import { Grid, GridItem } from 'vant';
+
 import HelloWorld from '@/components/HelloWorld.vue';
 import Menu from '@/module-mobile/components/Menu.vue';
 
 @Component({
   name: 'Home',
   components: {
     Menu,
-    HelloWorld
-  }
+    Grid,
+    GridItem,
+  },
 })
 export default class Home extends Vue {
   @Prop() private msg!: string;

temp/build.dev.js

@@ -9083,8 +9083,6 @@ TemplateRenderer.prototype.renderScripts = function renderScripts (context) {
 
     var needed = [].concat(initial[0] ? [initial[0]] : [], async, initial.slice(1));
 
-    console.log('needed', needed);
-
     return needed.map(function (ref) {
 
 

temp/server-plugin.js

@@ -57,17 +57,17 @@ VueSSRServerPlugin.prototype.apply = function apply (compiler) {
     var entryName = Object.keys(stats.entrypoints)[0];
     var entryInfo = stats.entrypoints[entryName];
 
-    console.log('\nstats', stats.entrypoints[entryName], entryName);
-
     if (!entryInfo) {
       // #5553
       return cb()
     }
 
-    var entryAssets = entryInfo.assets.filter(d => {
-      if(typeof d === 'string') return isJS(d);
-      return isJS(d.name);
-    });
+    var entryAssets = entryInfo.assets
+     .map(function(file) {
+        if (typeof file === 'string') return file;
+        if (Object.prototype.toString.call(file) === '[object Object]' && file.name) return file.name;
+      })
+      .filter(isJS);
 
     if (entryAssets.length > 1) {
       throw new Error(
@@ -77,25 +77,33 @@ VueSSRServerPlugin.prototype.apply = function apply (compiler) {
     }
 
     var entry = entryAssets[0];
-    var entryPath = typeof entry === 'string' ? entry : entry.name;
 
-    console.log('entry', entry, entryAssets);
+    console.log('\n entry', entry);
+    console.log('\n entryAssets', entryAssets);
+    console.log('\n entryInfo.assets', entryInfo.assets);
+
+    if (!entry || typeof entry !== 'string') {
 
-    if (!entry || typeof entryPath !== 'string') {
       throw new Error(
         ("Entry \"" + entryName + "\" not found. Did you specify the correct entry option?")
       )
     }
 
     var bundle = {
-      entry: entryPath,
+      entry: entry,
       files: {},
       maps: {}
     };
 
     stats.assets.forEach(function (asset) {
+
+      console.log('assets', asset);
       if (isJS(asset.name)) {
         bundle.files[asset.name] = compilation.assets[asset.name].source();
+        // LDODO
+        if (asset.info && asset.info.related && asset.info.related.sourceMap) {
+          bundle.maps[asset.info.related.sourceMap.replace(/\.map$/, '')] = JSON.parse(compilation.assets[asset.info.related.sourceMap].source());
+        }
       } else if (asset.name.match(/\.js\.map$/)) {
         bundle.maps[asset.name.replace(/\.map$/, '')] = JSON.parse(compilation.assets[asset.name].source());
       }

w-template/t-csr.html

@@ -1,4 +1,4 @@
-<html>
+<html style="font-size:14px">
   <head>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css" />
     <!-- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation) -->
@@ -8,8 +8,9 @@
     <meta name="format-detection" content="telephone=no, email=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-touch-fullscreen" content="yes">
+    <script>(window.__setFontSize__ = function () { document.documentElement.style.fontSize = Math.min(640, document.documentElement.clientWidth) / 320 * 28 + 'px' })()</script>
   </head>
-  <body>
+  <body style="font-size:14px">
     <!--vue-ssr-outlet-->
     <div id="app"></div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

w-template/t-ssr.html

@@ -1,4 +1,4 @@
-<html>
+<html style="font-size:14px">
   <head>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css" />
     <!-- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation) -->
@@ -8,10 +8,11 @@
     <meta name="format-detection" content="telephone=no, email=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-touch-fullscreen" content="yes">
+    <script>(window.__setFontSize__ = function () { document.documentElement.style.fontSize = Math.min(640, document.documentElement.clientWidth) / 320 * 28 + 'px' })()</script>
     <!-- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation) -->
     {{{ meta }}}
   </head>
-  <body>
+  <body style="font-size:14px">
     <!--vue-ssr-outlet-->
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.0/vue-router.min.js"></script>

webpack/config.base.js

@@ -2,7 +2,7 @@
  * @Author: zouhuan
  * @Date: 2020-12-08 15:13:38
  * @Last Modified by: zouhuan
- * @Last Modified time: 2020-12-09 11:08:06
+ * @Last Modified time: 2020-12-09 15:20:19
  * 编译模式：
  * 1. dev-server 开发环境
  * 2. dev build client环境

webpack/config.csr.js

@@ -27,7 +27,7 @@ module.exports = merge(baseConfig, {
   // 以便可以在之后正确注入异步 chunk。
   // 这也为你的 应用程序/vendor 代码提供了更好的缓存。
   optimization: {
-    moduleIds: 'deterministic',
+    moduleIds: 'named',
     chunkIds: 'deterministic',
     splitChunks: {
       name: false,
@@ -87,7 +87,14 @@ module.exports = merge(baseConfig, {
     new PrerenderSPAPlugin({
       // Required - The path to the webpack-outputted app to prerender.
       staticDir: resolve('dist-csr'),
-      routes: ['/about', '/'],
+      routes: [
+        '/about',
+        '/',
+        '/m/categorylist',
+        '/m/hotlist',
+        '/m/pyqlist',
+        '/m/mine'
+      ],
       postProcess(renderedRoute) {
         // add CDN
         // 由于CDN是以"/"结尾的，所以资源开头的“/”去掉

webpack/config.dev.js

@@ -16,7 +16,7 @@ const port = process.env.PORT || 10001;
 const baseConfig = getConfig({ isDevServer: true });
 
 module.exports = merge(baseConfig, {
-  stats: 'errors-warnings',
+  stats: 'errors-only',
   mode: 'development',
   entry: resolve('src/main.ts'),
   output: {
@@ -62,5 +62,3 @@ module.exports = merge(baseConfig, {
     })
   ]
 });
-
-console.log(`开发地址:http://localhost:${port}`);

webpack/config.ssr.client.js

@@ -25,7 +25,7 @@ module.exports = merge(baseConfig, {
   // 以便可以在之后正确注入异步 chunk。
   // 这也为你的 应用程序/vendor 代码提供了更好的缓存。
   optimization: {
-    moduleIds: 'deterministic',
+    moduleIds: 'named',
     chunkIds: 'deterministic',
     splitChunks: {
       name: false,