Vue服务端渲染实践 ——Web应用首屏耗时最优化方案

对付旧项目迁徙到SSR必定会经验的题目，一样平常为在项目进口处或是created、beforeCreate生命周期行使了DOM操纵，或是获取了location工具，通用的办理方案一样平常为判定执行情形，通过typeof window是否为'undefined'，假如碰着必需行使location工具的处所用于获取url中的相干参数，在ctx工具中也可以找到对应参数。

•  vue-router报错Uncaught TypeError: _Vue.extend is not _Vue function，没有找到_Vue实例的题目：

通过查察Vue-router源码发明没有手动挪用Vue.use(Vue-Router);。没有挪用Vue.use(Vue-Router);在赏识器端没有呈现题目，但在处事端就会呈现题目。对应的Vue-router源码所示：

VueRouter.prototype.init = function init (app /* Vue component instance */) {  
    var this$1 = this;  
  process.env.NODE_ENV !== 'production' && assert(  
    install.installed,  
    "not installed. Make sure to call `Vue.use(VueRouter)` " +  
    "before creating root instance."  
  );  
  // ...  
} 

•  处事端无法获取hash路由的参数

因为hash路由的参数，会导致vue-router不起结果，对付行使了vue-router的前后端同构应用，必需换为history路由。

•  接口处获取不到cookie的题目：

因为客户端每次哀求城市对应地把cookie带给接口侧，而处事端Web Server Frame作为署理处事器，并不会每次维持cookie，，以是必要我们手动把

cookie透传给接口侧，常用的办理方案是，将ctx挂载到全局状态中，当提倡异步哀求时，手动带上cookie，如下代码所示：

// createStore.js  
// 在建设全局状态的函数`createStore`时，将`ctx`挂载到全局状态  
export function createStore({ ctx }) {  
    return new Vuex.Store({  
        state: {  
            ...state,  
            ctx,  
        }, 
         getters,  
        actions,  
        mutations,  
        modules: {  
            // ...  
        },  
        plugins: debug ? [createLogger()] : [],  
    });  
} 

当提倡异步哀求时，手动带上cookie，项目中行使的是Axios：

// actions.js  
// ...  
const actions = {  
  async getUserInfo({ commit, state }) {  
    let requestParams = {  
      params: {  
        random: tool.createRandomString(8, true),  
      },  
      headers: {  
        'X-Requested-With': 'XMLHttpRequest',  
      },  
    };  
    // 手动带上cookie  
    if (state.ctx.request.headers.cookie) {  
      requestParams.headers.Cookie = state.ctx.request.headers.cookie;  
    }  
    // ...  
    let res = await Axios.get(`${requestUrlOrigin}${url.GET_A}`, requestParams);  
    commit(globalTypes.SET_A, {  
      res: res.data,  
    });  
  }  
};  
// ... 

•  接口哀求时报connect ECONNREFUSED 127.0.0.1:80的题目

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!