试一下静态化

.env

 NODE_ENV="production"
-VUE_APP_URL="prod"
+VUE_APP_URL="production"
 API_ROOT="/"
 VUE_APP_UPDATED="12.0.01"
 VUE_APP_UPLOAD_IMG="/base/upload/uploadPicture"

.env.development

+NODE_ENV="development"
+VUE_APP_URL="development"
+API_ROOT="/"
+VUE_APP_UPDATED="12.0.01"
+VUE_APP_UPLOAD_IMG="/base/upload/uploadPicture"
+VUE_APP_UPLOAD_FILE="/base/upload/uploadFile"
+VUE_APP_UPLOAD_LOGO="/base/upload/uploadLogo"
+VUE_APP_UPLOAD_FILEIMG="/base/upload/uploadImageOrFile"

.env.dev → .env.production

 NODE_ENV="production"
-VUE_APP_URL="dev"
+VUE_APP_URL="production"
 API_ROOT="/"
 VUE_APP_UPDATED="12.0.01"
 VUE_APP_UPLOAD_IMG="/base/upload/uploadPicture"

.gitignore

@@ -2,7 +2,7 @@
 
 .idea
 .idea/*
-.env*
+
 node_modules
 /node_modules/*
 node_modules/*

package.json

@@ -3,11 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "start": "npm run build:server && npm run build:client && npm run service",
+    "build:client": "cross-env RUN_ENV=client vue-cli-service build",
+    "build:server": "cross-env RUN_ENV=server vue-cli-service build --mode server",
+    "service": "node server/index.js",
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "devbuild": "vue-cli-service build --mode dev",
-    "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit"
+    "build": "vue-cli-service build"
   },
   "dependencies": {
     "animate.css": "^4.1.0",
@@ -28,17 +29,21 @@
     "jquery": "^3.4.1",
     "js-base64": "^2.5.1",
     "js-md5": "^0.7.3",
+    "koa": "^2.13.1",
+    "koa-static": "^5.0.0",
     "less-loader": "^5.0.0",
     "lrz": "^4.9.40",
     "mint-ui": "^2.2.13",
     "nativeshare": "^2.1.3",
     "pdfjs-dist": "^2.4.456",
     "portfinder": "^1.0.21",
+    "prerender-spa-plugin": "^3.4.0",
     "vue": "^2.6.10",
     "vue-awesome-swiper": "^3.1.3",
     "vue-count-to": "^1.0.13",
     "vue-cropper": "^0.5.6",
     "vue-i18n": "^8.14.0",
+    "vue-meta-info": "^0.1.7",
     "vue-native-share": "^1.0.2",
     "vue-pdf": "^4.0.8",
     "vue-preview": "^1.1.3",
@@ -49,6 +54,7 @@
     "vue-select": "^3.1.0",
     "vue-video-player": "^5.0.2",
     "vuex": "^3.0.1",
+    "vuex-router-sync": "^5.0.0",
     "wangeditor": "^3.1.1",
     "weixin-js-sdk": "^1.4.0-test"
   },
@@ -64,6 +70,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-plugin-transform-remove-strict-mode": "0.0.2",
+    "cross-env": "^7.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "html-webpack-plugin": "^4.3.0",
@@ -72,7 +79,9 @@
     "node-sass": "^4.9.0",
     "pdfh5": "^1.3.9",
     "sass-loader": "^7.1.0",
+    "vue-server-renderer": "^2.6.12",
     "vue-template-compiler": "^2.6.10",
+    "webpack-node-externals": "^2.5.2",
     "weixin-jsapi": "^1.1.0",
     "worker-loader": "^2.0.0"
   }

server/index.js

+const express = require('express');
+const fs = require('fs');
+const path = require('path');
+const { createBundleRenderer } = require('vue-server-renderer');
+
+const app = express();
+
+const serverBundle = require('./dist/vue-ssr-server-bundle.json');
+const clientManifest = require('./dist/vue-ssr-client-manifest.json');
+const template = fs.readFileSync(path.resolve('./src/index.template.html'), 'utf-8');
+
+const render = createBundleRenderer(serverBundle, {
+    runInNewContext: false, // 推荐
+    template, // （可选）页面模板
+    clientManifest
+});
+
+app.use(express.static('./dist',{index:false}))
+
+app.get('*', (req, res) => {
+    const context = { url: req.url }
+    // 这里无需传入一个应用程序，因为在执行 bundle 时已经自动创建过。
+    // 现在我们的服务器与应用程序已经解耦！
+    render.renderToString(context, (err, html) => {
+        console.log(html)
+        // 处理异常……
+        res.end(html)
+    })
+})
+
+const port = 3003;
+app.listen(port, function() {
+    console.log(`server started at localhost:${port}`);
+});

src/entry-client.js

+import {createApp} from './main'
+
+const {app, router, store} = createApp()
+// 因为可能存在异步组件，所以等待router将所有异步组件加载完毕，服务器端配置也需要此操作
+if (window.__INITIAL_STATE__) {
+    store.replaceState(window.__INITIAL_STATE__);
+}
+
+router.onReady(() => {
+    // 添加路由钩子函数，用于处理 asyncData.
+    // 在初始路由 resolve 后执行，
+    // 以便我们不会二次预取(double-fetch)已有的数据。
+    // 使用 `router.beforeResolve()`，以便确保所有异步组件都 resolve。
+    router.beforeResolve((to, from, next) => {
+        const matched = router.getMatchedComponents(to);
+        const prevMatched = router.getMatchedComponents(from);
+
+        // 我们只关心非预渲染的组件
+        // 所以我们对比它们，找出两个匹配列表的差异组件
+        let diffed = false;
+        const activated = matched.filter((c, i) => {
+            return diffed || (diffed = prevMatched[i] !== c);
+        });
+
+        if (!activated.length) {
+            return next();
+        }
+
+        // 这里如果有加载指示器 (loading indicator)，就触发
+
+        Promise.all(
+            activated.map((c) => {
+                if (c.asyncData) {
+                    return c.asyncData({store, route: to});
+                }
+            })
+        )
+            .then(() => {
+                // 停止加载指示器(loading indicator)
+
+                next();
+            })
+            .catch(next);
+    });
+    app.$mount('#app')
+})
\ No newline at end of file

src/entry-server.js

+// entry-server.js
+import { createApp } from './main'
+
+export default context => {
+    return new Promise((resolve, reject) => {
+        const { app, router, store } = createApp()
+
+        router.push(context.url)
+
+        router.onReady(() => {
+            const matchedComponents = router.getMatchedComponents()
+            if (!matchedComponents.length) {
+                return reject({ code: 404 })
+            }
+
+            // 对所有匹配的路由组件调用 `asyncData()`
+            Promise.all(matchedComponents.map(Component => {
+                if (Component.asyncData) {
+                    return Component.asyncData({
+                        store,
+                        route: router.currentRoute
+                    })
+                }
+            })).then(() => {
+                // 在所有预取钩子(preFetch hook) resolve 后，
+                // 我们的 store 现在已经填充入渲染应用程序所需的状态。
+                // 当我们将状态附加到上下文，
+                // 并且 `template` 选项用于 renderer 时，
+                // 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。
+                context.state = store.state
+
+                resolve(app)
+            }).catch(reject)
+        }, reject)
+    })
+}
\ No newline at end of file

src/index.template.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>hshs</title>
+</head>
+<body>
+<!--vue-ssr-outlet-->
+</body>
+</html>

src/main.js

@@ -7,6 +7,9 @@ import "../public/css/common.scss"
 import VueCropper from 'vue-cropper'
 import vuePreview from 'vue-preview'
 import animated from 'animate.css'
+// import { createRouter } from './router'
+// import { createStore } from "./store";
+
 Vue.use(animated)
 // import scroll from 'vue-seamless-scroll'
 // Vue.use(scroll)
@@ -21,7 +24,7 @@ Vue.use(vuePreview, {
     tapToClose: true,
     tapToToggleControls: false
 })
-var u = navigator.userAgent,ucFlag = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
+var u = navigator.userAgent, ucFlag = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
 let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|MicroMessenger|miniProgram|webview|wechatdevtools|MacWechat NetType)/i);
 // 手机
 // if(window.innerWidth>=1000){
@@ -35,18 +38,18 @@ let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Androi
 //     document.getElementsByTagName("html")[0].style.minWidth = "1400px";
 //     document.getElementsByTagName("body")[0].style.minWidth = "1400px";
 // }
-if(publicFun.judgeBrandIsWechatOrHtml()==1){
+if (publicFun.judgeBrandIsWechatOrHtml() == 1) {
     require('../public/css/pc.scss');
     document.getElementsByTagName("html")[0].style.minWidth = "1200px";
     document.getElementsByTagName("body")[0].style.minWidth = "1200px";
     document.getElementsByTagName("html")[0].style.fontSize = "14px";
     document.getElementsByTagName("body")[0].style.fontSize = "14px";
-}else{
+} else {
     require('../public/css/phone.scss');
     // document.getElementsByTagName("html")[0].style.fontSize = "10px";
     // document.getElementsByTagName("body")[0].style.fontSize = "10px";
 }
-import Element, { Message }  from 'element-ui'
+import Element, {Message} from 'element-ui'
 import Mintui from 'mint-ui';
 import 'mint-ui/lib/style.css'
 import './assets/font/iconfont.css'
@@ -71,6 +74,9 @@ import 'video.js/dist/video-js.css'
 import 'vue-video-player/src/custom-theme.css'
 import cancelRequest from './api/api'
 import versionJs from '../public/js/version';
+import MetaInfo from 'vue-meta-info';
+
+Vue.use(MetaInfo);
 Vue.use(VideoPlayer)
 Vue.use(VueCropper)
 Vue.use(versionJs);
@@ -82,22 +88,22 @@ Vue.use(vueSwiper);
 Vue.use(Element);
 Vue.use(Mintui);
 Vue.use(VueI18n);
-Vue.prototype.publicFun= publicFun;
-var type = navigator.appName,language;
+Vue.prototype.publicFun = publicFun;
+var type = navigator.appName, language;
 var ismobile = publicFun.getCookie('ismobile');
 if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
     window.entryUrl = location.origin;
 }
-if(ismobile == null){
-    ismobile = flag||ucFlag ? 1 : 0
+if (ismobile == null) {
+    ismobile = flag || ucFlag ? 1 : 0
 }
-if(!publicFun.getCookie("language")){
-    if(type=="Netscape"){
-        language =navigator.language;
-    }else{
+if (!publicFun.getCookie("language")) {
+    if (type == "Netscape") {
+        language = navigator.language;
+    } else {
         language = navigator.userLanguage;
     }
-    publicFun.setUserInfoCookie("language",language!='zh'&&language!='zh-CN'&&language!='zh-cn'?'en':'zh-CN');
+    publicFun.setUserInfoCookie("language", language != 'zh' && language != 'zh-CN' && language != 'zh-cn' ? 'en' : 'zh-CN');
 }
 // var userInfoObj = publicFun.getUserInfoCookieType() ? JSON.parse(Base64.decode(publicFun.getUserInfoCookieType())) : "",userInfoData = "";
 // if (document.cookie.length > 0) {
@@ -126,224 +132,221 @@ if(!publicFun.getCookie("language")){
 var en = publicFun.getCookie("language");
 Vue.config.productionTip = false;
 const messages = {
-    'en': en=='en'?Object.assign(enLang, enLocale):Object.assign(zhLang, zhLocale),
+    'en': en == 'en' ? Object.assign(enLang, enLocale) : Object.assign(zhLang, zhLocale),
     'zh-CN': Object.assign(zhLang, zhLocale)
     // 'zh-CN': require('./common/lang/zh'),   // 中文语言包
     // 'en': en=='en'?require('./common/lang/en'):require('./common/lang/zh')   // 英文语言包
 }
 const i18n = new VueI18n({
-    locale: en||"zh-CN",    // 语言标识
+    locale: en || "zh-CN",    // 语言标识
     //this.$i18n.locale // 通过切换locale的值来实现语言切换
     messages
 });
 locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换
 
- var isIE = (function(){
+var isIE = (function () {
     var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
     var isIEBrower = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
     var isEdge = userAgent.indexOf("Edge") > -1 && !isIEBrower; //判断是否IE的Edge浏览器
     var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
-    if(isIEBrower) {
+    if (isIEBrower) {
         var fIEVersion = parseFloat(RegExp["$1"]);
-        if(fIEVersion<11){
+        if (fIEVersion < 11) {
             alert("为了获得更好的浏览体验，我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等，或者升级到最新版本的IE浏览器。 如果您使用的是IE 11 或以上版本，请关闭“兼容性视图”。")
         }
-    }else if(isIE11){
+    } else if (isIE11) {
         alert("为了获得更好的浏览体验，我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等，或者升级到最新版本的IE浏览器。 如果您使用的是IE 11 或以上版本，请关闭“兼容性视图”。")
-    } else if(isEdge) {
+    } else if (isEdge) {
         alert("为了获得更好的浏览体验，我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等，或者升级到最新版本的IE浏览器。 如果您使用的是IE 11 或以上版本，请关闭“兼容性视图”。")
 
-    }else{
+    } else {
 
     }
 })();
-var getCookie = (function(){
+var getCookie = (function () {
     publicFun.getUserInfoCookie();
 })();
-import { Loading,MessageBox } from 'element-ui';
+import {Loading, MessageBox} from 'element-ui';
 import {Toast} from 'mint-ui';
-var vvv ="12.0.01"
-window.localStorage.setItem("_version_",vvv);
-if(vvv!=process.env.VUE_APP_UPDATED){
+
+var vvv = "12.0.01"
+window.localStorage.setItem("_version_", vvv);
+if (vvv != process.env.VUE_APP_UPDATED) {
     location.reload();
 }
-if(publicFun.judgeBrandIsWechatOrHtml()==2){
+if (publicFun.judgeBrandIsWechatOrHtml() == 2) {
     document.getElementsByTagName("body")[0].style.marginBottom = "2rem";
 }
-router.beforeEach((to, from, next) => {
-    globalMsg.$emit("isTopindex",to.path);
+// const routerVal = createRouter();
+const routerVal = router;
+routerVal.beforeEach((to, from, next) => {
+    globalMsg.$emit("isTopindex", to.path);
     store.dispatch("routerToPathAction", to.fullPath);
-    if (to.name == "mobileLoginCmpt"||to.name=="emailLoginCmpt") {
+    if (to.name == "mobileLoginCmpt" || to.name == "emailLoginCmpt") {
         cancelRequest.cancelRequest()
         next()
     } else {
         next()
     }
     if (to.name == "login") {
-        if (i18n.locale == "zh-CN") router.push({path:'/mobileLoginCmpt',query:to.query});
-        else router.push({path:'/emailLoginCmpt',query:to.query})
+        if (i18n.locale == "zh-CN") routerVal.push({path: '/mobileLoginCmpt', query: to.query});
+        else routerVal.push({path: '/emailLoginCmpt', query: to.query})
     }
     if (to.name == "mobileLoginCmpt") {
-        if (i18n.locale == "en") router.push({path:'/emailLoginCmpt',query:to.query});
+        if (i18n.locale == "en") routerVal.push({path: '/emailLoginCmpt', query: to.query});
     }
     if (to.name == "emailLoginCmpt") {
-        if (i18n.locale== "zh-CN") router.push({path:'/mobileLoginCmpt',query:to.query});
+        if (i18n.locale == "zh-CN") routerVal.push({path: '/mobileLoginCmpt', query: to.query});
     }
     if (to.name == "mobileRegisterCmpt") {
-        if (i18n.locale == "en") router.push({path:'/emailRegisterCmpt',query:to.query});
+        if (i18n.locale == "en") routerVal.push({path: '/emailRegisterCmpt', query: to.query});
     }
-    if (to.name == "emailRegisterCmpt"){
-        if (i18n.locale == "zh-CN") router.push({path:'/mobileRegisterCmpt',query:to.query});
+    if (to.name == "emailRegisterCmpt") {
+        if (i18n.locale == "zh-CN") routerVal.push({path: '/mobileRegisterCmpt', query: to.query});
     }
-    if(to.name=="dashboard"){
-        // if(window.innerWidth<=950) router.replace('/index');
-        if((/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)&&navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger')||/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) router.replace('/index');
+    if (to.name == "dashboard") {
+        // if(window.innerWidth<=950) routerVal.replace('/index');
+        if ((/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) && navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') || /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) routerVal.replace('/index');
         else {
 
         }
     }
-    if(to.name=="mobileIndex"){
-        // if(window.innerWidth>950) router.push('/');
-        if((/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)&&navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger')||/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
+    if (to.name == "mobileIndex") {
+        // if(window.innerWidth>950) routerVal.push('/');
+        if ((/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) && navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') || /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
 
         }
         else {
-            router.push('/');
+            routerVal.push('/');
         }
     }
     if (to.name == "mobileLogin") {
-        if (i18n.locale == "zh-CN") router.push({path:'/loginByPhone',query:to.query});
-        else router.push({path:'/loginByEmail',query:to.query})
+        if (i18n.locale == "zh-CN") routerVal.push({path: '/loginByPhone', query: to.query});
+        else routerVal.push({path: '/loginByEmail', query: to.query})
     }
     if (to.name == "loginByPhone") {
-        if (i18n.locale == "en") router.replace({path:'/loginByEmail',query:to.query});
+        if (i18n.locale == "en") routerVal.replace({path: '/loginByEmail', query: to.query});
     }
     if (to.name == "loginByEmail") {
-        if (i18n.locale== "zh-CN") router.replace({path:'/loginByPhone',query:to.query});
+        if (i18n.locale == "zh-CN") routerVal.replace({path: '/loginByPhone', query: to.query});
     }
-    if(!publicFun.getUserInfoCookieType()){
-        if(to.matched[0].name == 'index'||to.matched[0].name=='indexView'|| to.matched[0].name == 'login'||to.matched[0].name=="mobileLogin"||to.matched[0].name=="mobileNotNeedLogin"||to.matched[0].name=="notLoginLtrIndex"||to.matched[0].name=="noHeaderIndexNotLoginedParentRouter"||(to.matched.length==1&&to.name.indexOf("ParentRouter")!=-1)){
-            if(to.path == '/projectlist' || to.path == '/phoneBusinessList'){
-                publicFun.setUserInfoCookie("fullPath",true);
-            }else{
-                publicFun.setUserInfoCookie("fullPath",false);
+    if (!publicFun.getUserInfoCookieType()) {
+        if (to.matched[0].name == 'index' || to.matched[0].name == 'indexView' || to.matched[0].name == 'login' || to.matched[0].name == "mobileLogin" || to.matched[0].name == "mobileNotNeedLogin" || to.matched[0].name == "notLoginLtrIndex" || to.matched[0].name == "noHeaderIndexNotLoginedParentRouter" || (to.matched.length == 1 && to.name.indexOf("ParentRouter") != -1)) {
+            if (to.path == '/projectlist' || to.path == '/phoneBusinessList') {
+                publicFun.setUserInfoCookie("fullPath", true);
+            } else {
+                publicFun.setUserInfoCookie("fullPath", false);
             }
             // if(to.path == '/projectrelease'||to.path == '/addPhoneRequire'||to.path=='/mine'){
-            //     if (i18n.locale == "zh-CN") router.push({path:'/loginByPhone',query:to.query});
-            //     else router.push({path:'/loginByEmail',query:to.query})
+            //     if (i18n.locale == "zh-CN") routerVal.push({path:'/loginByPhone',query:to.query});
+            //     else routerVal.push({path:'/loginByEmail',query:to.query})
             // }else{
-            //     if(publicFun.getCookie('ismobile')==1) router.push('/mobileRegister');
+            //     if(publicFun.getCookie('ismobile')==1) routerVal.push('/mobileRegister');
             //     else {
-            //         if (i18n.locale == "zh-CN") router.push({path:'/mobileLoginCmpt',query:to.query});
-            //         else router.push({path:'/emailLoginCmpt',query:to.query})
+            //         if (i18n.locale == "zh-CN") routerVal.push({path:'/mobileLoginCmpt',query:to.query});
+            //         else routerVal.push({path:'/emailLoginCmpt',query:to.query})
             //     }
             // }
-        }else{
-            if (i18n.locale == "zh-CN") router.push({path:'/loginByPhone',query:to.query});
-            else router.push({path:'/loginByEmail',query:to.query})
+        } else {
+            if (i18n.locale == "zh-CN") routerVal.push({path: '/loginByPhone', query: to.query});
+            else routerVal.push({path: '/loginByEmail', query: to.query})
         }
-    }else{
+    } else {
 
     }
 
-    if(to.name){
-        if(to.name.indexOf("index")==-1&&to.name.indexOf("Index")==-1){
-            if(to.name=='subjectList'||to.name=='duijietabconnect'||to.name=='activitylist'||to.name=='mineIndex') globalMsg.$emit("isReturnVal",false);
-            else globalMsg.$emit("isReturnVal",true);
-        }else globalMsg.$emit("isReturnVal",false);
-        if(to.name=='mobileIndex') {
-            globalMsg.$emit("sendSelected","index");
-            publicFun.setUserInfoCookie("selected","index");
+    if (to.name) {
+        if (to.name.indexOf("index") == -1 && to.name.indexOf("Index") == -1) {
+            if (to.name == 'subjectList' || to.name == 'duijietabconnect' || to.name == 'activitylist' || to.name == 'mineIndex') globalMsg.$emit("isReturnVal", false);
+            else globalMsg.$emit("isReturnVal", true);
+        } else globalMsg.$emit("isReturnVal", false);
+        if (to.name == 'mobileIndex') {
+            globalMsg.$emit("sendSelected", "index");
+            publicFun.setUserInfoCookie("selected", "index");
         }
-        if(to.name=='duijietabconnect'||to.name.indexOf("duijie")!=-1) {
-            if(to.name=="duijieaddPhoneRequire"||to.name=="duijieprojectrelease"||to.name=="duijieprojectdetails"||to.name=="duijiephoneBusinessDetail"){
-            }else{
-                globalMsg.$emit("sendSelected","contact");
-                publicFun.setUserInfoCookie("selected","contact");
+        if (to.name == 'duijietabconnect' || to.name.indexOf("duijie") != -1) {
+            if (to.name == "duijieaddPhoneRequire" || to.name == "duijieprojectrelease" || to.name == "duijieprojectdetails" || to.name == "duijiephoneBusinessDetail") {
+            } else {
+                globalMsg.$emit("sendSelected", "contact");
+                publicFun.setUserInfoCookie("selected", "contact");
             }
 
         }
-        if(to.name=='subjectList'||to.name.indexOf("subject")!=-1) {
-            if(to.name=="subjectStage"||to.name=="subjectsecondStageDetail") publicFun.setUserInfoCookie("sendCurrentStage",true);
+        if (to.name == 'subjectList' || to.name.indexOf("subject") != -1) {
+            if (to.name == "subjectStage" || to.name == "subjectsecondStageDetail") publicFun.setUserInfoCookie("sendCurrentStage", true);
             else {
-                globalMsg.$emit("sendSelected","voted");
-                publicFun.setUserInfoCookie("selected","voted");
+                globalMsg.$emit("sendSelected", "voted");
+                publicFun.setUserInfoCookie("selected", "voted");
             }
         }
-        if(to.name=='circleList'){
-            globalMsg.$emit("sendSelected","circle");
-            publicFun.setUserInfoCookie("selected","circle");
+        if (to.name == 'circleList') {
+            globalMsg.$emit("sendSelected", "circle");
+            publicFun.setUserInfoCookie("selected", "circle");
         }
-        if(to.name=='activitylist'||to.name.indexOf("activity")!=-1) {
-            if(to.name=="activityMyJoin"||to.name=="activitydetail"||to.name=="activityapplySuccess"||to.name=="activityapplyForProject") {
+        if (to.name == 'activitylist' || to.name.indexOf("activity") != -1) {
+            if (to.name == "activityMyJoin" || to.name == "activitydetail" || to.name == "activityapplySuccess" || to.name == "activityapplyForProject") {
 
-            }else {
-                globalMsg.$emit("sendSelected","activity");
-                publicFun.setUserInfoCookie("selected","activity");
+            } else {
+                globalMsg.$emit("sendSelected", "activity");
+                publicFun.setUserInfoCookie("selected", "activity");
             }
 
         }
-        if(to.name=='mineIndex'||to.name.indexOf("mine")!=-1) {
-            globalMsg.$emit("sendSelected","mine");
-            publicFun.setUserInfoCookie("selected","mine");
+        if (to.name == 'mineIndex' || to.name.indexOf("mine") != -1) {
+            globalMsg.$emit("sendSelected", "mine");
+            publicFun.setUserInfoCookie("selected", "mine");
         }
     }
-    if(to.name=="mineIndex"&&!publicFun.getUserInfoCookieType()&&publicFun.judgeBrandIsWechatOrHtml() == 1) router.replace({path:'/circleList'})
+    if (to.name == "mineIndex" && !publicFun.getUserInfoCookieType() && publicFun.judgeBrandIsWechatOrHtml() == 1) routerVal.replace({path: '/circleList'})
     next();
-    document.body.scrollTop=document.documentElement.scrollTop=0;
-    if(to.path!=from.path){
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+    if (to.path != from.path) {
         cancelRequest.cancelRequest()
 
     }
 });
-
-// router.onError((error) => {
+// routerVal.onError((err) => {
 //     const pattern = /Loading chunk (\d)+ failed/g;
-//     const isChunkLoadFailed = error.message.match(pattern);
-//     const targetPath = router.history.pending.fullPath;
+//     const isChunkLoadFailed = err.message.match(pattern);
 //     if (isChunkLoadFailed) {
-//         // router.replace(targetPath);
-//         location.reload();
+//         let chunkBool = sessionStorage.getItem('chunkError');
+//         let nowTimes = Date.now();
+//         if (chunkBool === null || chunkBool && nowTimes - parseInt(chunkBool) > 60000) {//路由跳转报错,href手动跳转
+//             sessionStorage.setItem('chunkError', 'reload');
+//             const targetPath = router.history.pending.fullPath;
+//             window.location.href = window.location.origin + targetPath;
+//         } else if (chunkBool === 'reload') { //手动跳转后依然报错,强制刷新
+//             sessionStorage.setItem('chunkError', Date.now());
+//             window.location.reload(true);
+//         }
 //     }
-// });
-router.onError((err) => {
-    const pattern = /Loading chunk (\d)+ failed/g;
-    const isChunkLoadFailed = err.message.match(pattern);
-    if (isChunkLoadFailed) {
-        let chunkBool = sessionStorage.getItem('chunkError');
-        let nowTimes = Date.now();
-        if (chunkBool === null || chunkBool && nowTimes - parseInt(chunkBool) > 60000) {//路由跳转报错,href手动跳转
-            sessionStorage.setItem('chunkError', 'reload');
-            const targetPath = router.history.pending.fullPath;
-            window.location.href = window.location.origin + targetPath;
-        }else if(chunkBool === 'reload'){ //手动跳转后依然报错,强制刷新
-            sessionStorage.setItem('chunkError', Date.now());
-            window.location.reload(true);
-        }
-    }
-})
+// })
 
 // 为了实现Class的私有属性
 const showMessage = Symbol('showMessage')
+
 /**
  *  重写ElementUI的Message
  *  single默认值true，因为项目需求，默认只弹出一个，可以根据实际需要设置
  */
 class DonMessage {
-    success (options, single = true) {
+    success(options, single = true) {
         this[showMessage]('success', options, single)
     }
-    warning (options, single = true) {
+
+    warning(options, single = true) {
         this[showMessage]('warning', options, single)
     }
-    info (options, single = true) {
+
+    info(options, single = true) {
         this[showMessage]('info', options, single)
     }
-    error (options, single = true) {
+
+    error(options, single = true) {
         this[showMessage]('error', options, single)
     }
 
-    [showMessage] (type, options, single) {
+    [showMessage](type, options, single) {
         if (single) {
             // 判断是否已存在Message
             if (document.getElementsByClassName('el-message').length === 0) {
@@ -354,12 +357,58 @@ class DonMessage {
         }
     }
 }
+
 // 命名根据需要，DonMessage只是在文章中使用
 Vue.prototype.$message = new DonMessage()
 global.globalMsg = new Vue();
-new Vue({
+// new Vue({
+//     router,
+//     store,
+//     i18n,
+//     render: h => h(App)
+// }).$mount('#app')
+
+
+const vueApp = new Vue({
     router,
     store,
     i18n,
-    render: h => h(App)
-}).$mount('#app')
+    // metaInfo(){
+    //     return {
+    //         title: this.$store.state.metaInfo.title,
+    //         meta: [
+    //             {
+    //                 name: "keywords",
+    //                 content: this.$store.state.metaInfo.keywords
+    //             }, {
+    //                 name: "description",
+    //                 content: this.$store.state.metaInfo.description
+    //             }
+    //         ]
+    //     }
+    // },
+    render: h => h(App),
+    //添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
+    // mounted () {
+    //     document.dispatchEvent(new Event('render-event'))
+    // }
+});
+export function createApp(){
+    return {vueApp, store, router}
+}
+vueApp.$mount('#app');
+
+// export function createApp() {
+//     // 创建 router 实例
+//     const router = new createRouter();
+//     const store = new createStore();
+//     const app = new Vue({
+//         // 注入 router 到根 Vue 实例
+//         router,
+//         store,
+//         i18n,
+//         render: h => h(App)
+//     })
+//     // 返回 app 和 router
+//     return {app, router, store}
+// }

src/router.js

@@ -151,6 +151,11 @@ const router = new Router({
     mode: 'history',
     routes: [
         {path: '*', component: notFind},
+        {
+            path: '/test',
+            name: 'Test',
+            component: () => import('views/test') // 异步组件
+        },
         {
             path: '/',
             name: 'index',
@@ -2199,4 +2204,7 @@ router.onError((err) => {
     }
 })
 
-export default router;
+// export function createRouter () {
+//     return router;
+// }
+export default router;
\ No newline at end of file

src/store.js

@@ -227,3 +227,230 @@ export default new Vuex.Store({
         }
     }
 })
+
+// export default function createStore(){
+//     return new Vuex.Store({
+//         state: {
+//             bigBusinessSearch:new Map(),//大B列表搜索
+//             bigBusinessPage:new Map(),//大B分页页码
+//             projectPage:new Map(),//小B分页页码
+//             searchResultBigBusiness:new Map(),//搜索结果大B分页
+//             searchResultSmallBusiness:new Map(),//搜索结果小B分页
+//             searchResult:new Map(),//搜索结果
+//             projectSearch:new Map(),
+//             saveSearchResultKeyword:new Map(),//搜索key
+//             saleManageRequireListSearch:new Map(),//销售维护的需求搜索+分页
+//             saleManageProjectListSearch:new Map(),//销售对接的项目搜索
+//             hotCitySelected:new Map(),//热门城市选中字段
+//             sortCitySelected:new Map(),//排序城市选中字段
+//             applyListPage:new Map(),//报名列表页码
+//             applySearchListPage:new Map(),//报名搜索列表页码
+//             myJoinListPage:new Map(),//我参与的活动页码
+//             selectSubjectProjectList:new Map(),//项目评审列表页码
+//             subjectProjectDetailCommentList:new Map(),//项目评审详情评论页码
+//             currentDetailId:new Map(),//发布需求成功之后获取需求id
+//             routerToPath:"",
+//             myPartnerManageListSearch:new Map(),//销售我维护的合作伙伴筛选+分页
+//             myAuditPartnerManageListSearch:new Map(),//运营验收的合作伙伴筛选+分页
+//             myBusGoverManageListSearch:new Map(),//销售我维护的大企业机构政府筛选+分页
+//             myAuditBusGoverManageListSearch:new Map(),//运营验收的大企业机构政府筛选+分页
+//         },
+//         mutations: {
+//             SAVE_LIST_PAGE_PARS:(state,{path,pars})=>{
+//                 state.bigBusinessSearch.set(path,pars);
+//             },
+//
+//             SAVE_LIST_PAGE_NUM:(state,{path,pars})=>{ //大B记住分页
+//                 state.bigBusinessPage.set(path,pars)
+//             },
+//
+//             project_PAGE_NUM:(state,{path,pars})=>{ //大B记住分页
+//                 state.projectPage.set(path,pars)
+//             },
+//
+//             SEARCH_RESULT_BB_PAGE_NUM:(state,{path,pars})=>{ //搜索结果大B分页
+//                 state.searchResultBigBusiness.set(path,pars)
+//             },
+//
+//             SEARCH_RESULT_SB_PAGE_NUM:(state,{path,pars})=>{ //搜索结果小B分页
+//                 state.searchResultSmallBusiness.set(path,pars)
+//             },
+//
+//             SEARCH_RESULT:(state,{path,pars})=>{//搜索结果
+//                 state.searchResult.set(path,pars)
+//             },
+//
+//             SEARCH_RESULT_KEYWORD:(state,{path,pars})=>{//搜索key
+//                 state.saveSearchResultKeyword.set(path,pars)
+//             },
+//
+//             pro_PARS:(state,{path,pars})=>{
+//                 state.projectSearch.set(path,pars);
+//             },
+//
+//             //销售维护的需求分页
+//             saleManageRequireListSearch_Func:(state,{path,pars})=>{
+//                 state.saleManageRequireListSearch.set(path,pars);
+//             },
+//
+//             //销售对接的项目分页
+//             saleManageProjectListSearch_Func:(state,{path,pars})=>{
+//                 state.saleManageProjectListSearch.set(path,pars);
+//             },
+//             hotCitySelected_Func:(state,{path,pars})=>{
+//                 state.hotCitySelected.set(path,pars);
+//             },
+//             sortCitySelected_Func:(state,{path,pars})=>{
+//                 state.sortCitySelected.set(path,pars);
+//             },
+//             applyListPage_Func:(state,{path,pars})=>{
+//                 state.applyListPage.set(path,pars);
+//             },
+//             applySearchListPage_Func:(state,{path,pars})=>{
+//                 state.applySearchListPage.set(path,pars);
+//             },
+//             myJoinListPage_Func:(state,{path,pars})=>{
+//                 state.myJoinListPage.set(path,pars);
+//             },
+//
+//             selectSubjectProjectList_Func:(state,{path,pars})=>{
+//                 state.selectSubjectProjectList.set(path,pars);
+//             },
+//
+//             subjectProjectDetailCommentList_Func:(state,{path,pars})=>{
+//                 state.subjectProjectDetailCommentList.set(path,pars);
+//             },
+//             currentDetailId_Func:(state,{path,pars})=>{
+//                 state.currentDetailId.set(path,pars);
+//             },
+//
+//             // 记录要跳转过去的路径
+//             routerToPathMutation(state, value){
+//                 state.routerToPath = value;
+//             },
+//
+//             //销售维护的合作伙伴分页
+//             myPartnerManageListSearch_Func:(state,{path,pars})=>{
+//                 state.myPartnerManageListSearch.set(path,pars);
+//             },
+//
+//             //运营验收的的合作伙伴分页
+//             myAuditPartnerManageListSearch_Func:(state,{path,pars})=>{
+//                 state.myAuditPartnerManageListSearch.set(path,pars);
+//             },
+//
+//             //销售维护的大企业机构政府分页
+//             myBusGoverManageListSearch_Func:(state,{path,pars})=>{
+//                 state.myBusGoverManageListSearch.set(path,pars);
+//             },
+//
+//             //运营验收的的大企业机构政府分页
+//             myAuditBusGoverManageListSearch_Func:(state,{path,pars})=>{
+//                 state.myAuditBusGoverManageListSearch.set(path,pars);
+//             },
+//         },
+//         actions: {
+//             saveListPagePars: ({ commit },{path,pars}) => {
+//                 commit('SAVE_LIST_PAGE_PARS',{ path,pars });
+//             },
+//
+//             saveListPageNum: ({ commit },{path,pars}) => {
+//                 commit('SAVE_LIST_PAGE_NUM',{ path,pars });
+//             },
+//
+//             projectPageNum: ({ commit },{path,pars}) => {
+//                 commit('project_PAGE_NUM',{ path,pars });
+//             },
+//             saveSearchResultBBPageNum: ({ commit },{path,pars}) => {
+//                 commit('SEARCH_RESULT_BB_PAGE_NUM',{ path,pars });
+//             },
+//
+//             saveSearchResultSBPageNum: ({ commit },{path,pars}) => {
+//                 commit('SEARCH_RESULT_SB_PAGE_NUM',{ path,pars });
+//             },
+//
+//             saveSearchResult: ({ commit },{path,pars}) => {
+//                 commit('SEARCH_RESULT',{ path,pars });
+//             },
+//
+//             saveSearchResultKeyword: ({ commit },{path,pars}) => {
+//                 commit('SEARCH_RESULT_KEYWORD',{ path,pars });
+//             },
+//
+//             projectPagePars: ({ commit },{path,pars}) => {
+//                 commit('pro_PARS',{ path,pars });
+//             },
+//
+//             saleManageRequireListSearchAction: ({ commit },{path,pars}) => {
+//                 commit('saleManageRequireListSearch_Func',{ path,pars });
+//             },
+//
+//             saleManageProjectListSearchAction: ({ commit },{path,pars}) => {
+//                 commit('saleManageProjectListSearch_Func',{ path,pars });
+//             },
+//
+//             hotCitySelectedAction:({ commit },{path,pars})=>{
+//                 commit('hotCitySelected_Func',{ path,pars });
+//
+//             },
+//
+//             sortCitySelectedAction:({ commit },{path,pars})=>{
+//                 commit('sortCitySelected_Func',{ path,pars });
+//
+//             },
+//
+//             applyListPageAction:({ commit },{path,pars})=>{
+//                 commit('applyListPage_Func',{ path,pars });
+//
+//             },
+//             applySearchListPageAction:({ commit },{path,pars})=>{
+//                 commit('applySearchListPage_Func',{ path,pars });
+//
+//             },
+//             myJoinListPageAction:({ commit },{path,pars})=>{
+//                 commit('myJoinListPage_Func',{ path,pars });
+//
+//             },
+//
+//             selectSubjectProjectListAction:({ commit },{path,pars})=>{
+//                 commit('selectSubjectProjectList_Func',{ path,pars });
+//             },
+//
+//             subjectProjectDetailCommentListAction:({ commit },{path,pars})=>{
+//                 commit('subjectProjectDetailCommentList_Func',{ path,pars });
+//             },
+//
+//             currentDetailIdAction:({ commit },{path,pars})=>{
+//                 commit('currentDetailId_Func',{ path,pars });
+//             },
+//
+//             // 记录要跳转过去的路径
+//             routerToPathAction(context, value){
+//                 context.commit("routerToPathMutation", value);
+//             },
+//
+//             myPartnerManageListSearchAction: ({ commit },{path,pars}) => {
+//                 commit('myPartnerManageListSearch_Func',{ path,pars });
+//             },
+//
+//             myAuditPartnerManageListSearchAction: ({ commit },{path,pars}) => {
+//                 commit('myAuditPartnerManageListSearch_Func',{ path,pars });
+//             },
+//
+//             myBusGoverManageListSearchAction: ({ commit },{path,pars}) => {
+//                 commit('myBusGoverManageListSearch_Func',{ path,pars });
+//             },
+//
+//             myAuditBusGoverManageListSearchAction: ({ commit },{path,pars}) => {
+//                 commit('myAuditBusGoverManageListSearch_Func',{ path,pars });
+//             },
+//
+//
+//         },
+//         getters:{
+//             routerToPath(state) {
+//                 return state.routerToPath;
+//             }
+//         }
+//     })
+// }

src/views/conmanagementpage/contentdetail.vue

@@ -169,6 +169,16 @@
         components:{
             hotArticlepage,VueQRCodeComponent,expertVisible,reporbar,dialogintegralbar
         },
+        metaInfo() {
+            return {
+                title: this.contentData ? this.contentData.contentTitle + "_TechBook" : "",
+                meta: [
+                    {name: 'description', content: this.contentData ? this.contentData.contentValidity : ""},
+                    {name: 'keywords', content: this.contentData ? this.contentData.contentLabel : ""}
+
+                ],
+            }
+        },
         data() {
             return {
                 contentData:{

src/views/test.vue

+<template>
+  <div>
+    Just a test page.
+    <div>
+      <router-link to="/">Home</router-link>
+    </div>
+    <div><h2>{{mode}}</h2></div>
+    <div><span>{{count}}</span></div>
+    <div><button @click="count++">+1</button></div>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        mode: process.env.VUE_ENV === 'server' ? 'server' : 'client',
+        count: 2
+      }
+    }
+  }
+</script>

vue.config.js

@@ -8,9 +8,14 @@ const productionGzipExtensions = ['js', 'css'];
 const path = require("path");
 const express = require('express')
 const app = express()
-
+const PrerenderSpaPlugin = require('prerender-spa-plugin')
+const Renderer = PrerenderSpaPlugin.PuppeteerRenderer
 var version = require('./public/version')  //本地json文件数据
-
+const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
+const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
+const nodeExternals = require("webpack-node-externals");
+const env = process.env;
+const isServer = env.RUN_ENV === "server";
 var apiRoutes = express.Router();
 app.use('/api', apiRoutes)
 function resolve(dir) {
@@ -28,6 +33,7 @@ module.exports = {
     // 例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.
     // publicPath          : process.env.NODE_ENV === 'production' ? '/' : '/',
     publicPath          :'/',
+    // outputDir: `dist/${env.RUN_ENV}`,
     // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
     // outputDir : 'dist',
     // pages:{ type:Object,Default:undfind }
@@ -75,7 +81,9 @@ module.exports = {
     },
     configureWebpack: config => {
         if (process.env.NODE_ENV === 'production') {
-
+            // config.entry = `./src/entry-${env.RUN_ENV}.js`;
+            // config.target = isServer ? "node" : "web";
+            // config.output.libraryTarget = isServer ? "commonjs2" : undefined;
             new CompressionWebpackPlugin({
                 filename: '[path].gz[query]',
                 algorithm: 'gzip',
@@ -86,7 +94,6 @@ module.exports = {
             });
             config.output.filename = `js/[name].[chunkhash:8].${process.env.VUE_APP_UPDATED}.js`;
             config.output.chunkFilename = `js/[name].[chunkhash:8].${process.env.VUE_APP_UPDATED}.js`;
-
             // 为生产环境修改配置...
             config.plugins.push(
                 // new CleanWebpackPlugin(['dist']),
@@ -94,6 +101,33 @@ module.exports = {
                 //     filename : `css/[name].${process.env.VUE_APP_UPDATED}.css`,
                 //     chunkFilename: `css/[name].${process.env.VUE_APP_UPDATED}.css`
                 // } ),
+                // new PrerenderSpaPlugin({ //预渲染  处理页面SEO
+                //     staticDir: path.join(__dirname, 'dist'),
+                //     // 需要进行预渲染的路由路径 我这里做的是首页
+                //     routes: ['/articleDetail'], //需要预渲染的路由页面 我这只用了首页
+                //     // html文件压缩
+                //     minify: {
+                //         minifyCSS: true, // css压缩
+                //         removeComments: true // 移除注释
+                //     },
+                //     renderer: new Renderer({
+                //         inject: {},
+                //         // 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}})，两者的事件名称要对应上。
+                //         renderAfterDocumentEvent: 'render-event',
+                //         // args: ['--no-sandbox', '--disable-setuid-sandbox'],
+                //     })
+                //     // renderer: new PrerenderSpaPlugin.PuppeteerRenderer({//这样写renderAfterTime生效了
+                //     //     renderAfterTime: 5000
+                //     // })
+                // }),
+                new PrerenderSpaPlugin(
+                    // 生成文件的路径，此处与webpack打包地址一致
+                    path.join(__dirname, 'dist'), //config.build.assetsRoot为vue cli生成的配置，打包后的文件地址
+                    // 配置要做预渲染的路由，只支持h5 history方式
+                    [ '/','/articleDetail']
+                ),
+
+                // isServer ? new VueSSRServerPlugin() : new VueSSRClientPlugin(),
                 new webpack.ProvidePlugin({
                     $:"jquery",