日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

小編給大家分享一下構(gòu)建vueSSR項目之如何配置node以及vue-cli3，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司成立與2013年，公司自成立以來始終致力于為企業(yè)提供官網(wǎng)建設(shè)、移動互聯(lián)網(wǎng)業(yè)務(wù)開發(fā)（成都微信小程序、手機網(wǎng)站建設(shè)、成都app軟件開發(fā)等），并且包含互聯(lián)網(wǎng)基礎(chǔ)服務(wù)（域名、主機服務(wù)、企業(yè)郵箱、網(wǎng)絡(luò)營銷等）應(yīng)用服務(wù)；以先進(jìn)完善的建站體系及不斷開拓創(chuàng)新的精神理念，幫助企業(yè)客戶實現(xiàn)互聯(lián)網(wǎng)業(yè)務(wù)，嚴(yán)格把控項目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實力獲得客戶的一致贊譽。

前言

服務(wù)端部分做完，再去做vuex的部分，這樣就會很清晰。

vue ssr是分兩個端，一個是客戶端，一個是服務(wù)端。

所以要做兩個cli3的配置。

那么下面就直接開始做吧。

修改package.json的命令

//package.json :client代表客戶端 :server代表服務(wù)端
//使用VUE_NODE來作為運行環(huán)境是node的標(biāo)識
//cli3內(nèi)置 命令 --no-clean 不會清除dist文件
  "scripts": {
    "serve:client": " vue-cli-service serve",
    "build":"npm run build:server -- --silent && npm run build:client -- --no-clean --silent",
    "build:client": "vue-cli-service build",
    "build:server": "cross-env VUE_NODE=node vue-cli-service build",
    "start:server": "cross-env NODE_ENV=production nodemon nodeScript/index"
  }

修改vue.config.js配置

添加完相關(guān)腳本命令之后，我們開始改造cli3配置。

首先要require('vue-server-renderer')

然后再根據(jù)VUE_NODE環(huán)境變量來決定編譯的走向以及生成不同的環(huán)境清單

先做cli3服務(wù)端的入口文件

// src/entry/server.js
import {
  createApp
} from '../main.js'

export default context => {

  return new Promise((resolve, reject) => {
    const {
      app,
      router
    } = createApp(context.data)
    //根據(jù)node傳過來的路由 來調(diào)用router路由的指向
    router.push(context.url)

    router.onReady(() => {
      //獲取當(dāng)前路由匹配的組件數(shù)組。
      const matchedComponents = router.getMatchedComponents()
      //長度為0就是沒找到該路由所匹配的組件
      //可以路由設(shè)置重定向或者傳回node node來操作也可以
      if (!matchedComponents.length) {

        return reject({
          code: 404
        })
      }

      resolve(app)

    }, reject)
  })
}

這里是cli3的配置

//vue.config.js

const ServerPlugin = require('vue-server-renderer/server-plugin'),//生成服務(wù)端清單
   ClientPlugin = require('vue-server-renderer/client-plugin'),//生成客戶端清單
   nodeExternals = require('webpack-node-externals'),//忽略node_modules文件夾中的所有模塊
   VUE_NODE = process.env.VUE_NODE === 'node',
   entry = VUE_NODE ? 'server' : 'client';//根據(jù)環(huán)境變量來指向入口

module.exports = {
  css: {
    extract: false//關(guān)閉提取css,不關(guān)閉 node渲染會報錯
  },
  configureWebpack: () => ({
    entry: `./src/entry/${entry}`,
    output: {
      filename: 'js/[name].js',
      chunkFilename: 'js/[name].js',
      libraryTarget: VUE_NODE ? 'commonjs2' : undefined
    },
    target: VUE_NODE ? 'node' : 'web',
    externals: VUE_NODE ? nodeExternals({
      //設(shè)置白名單
      whitelist: /\.css$/
    }) : undefined,
    plugins: [//根據(jù)環(huán)境來生成不同的清單。
      VUE_NODE ? new ServerPlugin() : new ClientPlugin()
    ]
  }),
  chainWebpack: config => {
    config.resolve
      .alias
        .set('vue$', 'vue/dist/vue.esm.js')
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(options => {
            options.optimizeSSR = false;
            return options;
          });
    config.module
      .rule('images')
        .use('url-loader')
          .tap(options => {
            options = {
              limit: 1024,
              fallback:'file-loader?name=img/[path][name].[ext]'
            }
            return options;
          });
  }
}

node相關(guān)配置

用于node渲染 必然要攔截get請求的。然后根據(jù)get請求地址來進(jìn)行要渲染的頁面。

官方提供了vue-server-renderer插件

大概的方式就是 node攔截所有的get請求，然后將獲取到的路由地址，傳給前臺，然后使用router實例進(jìn)行push

再往下面看之前 先看一下官方文檔

創(chuàng)建BundleRenderer
createBundleRenderer

將 Vue 實例渲染為字符串。
renderToString

渲染應(yīng)用程序的模板
template

生成所需要的客戶端或服務(wù)端清單
clientManifest

先創(chuàng)建 服務(wù)端所需要的模板

//public/index.nodeTempalte.html


  
    
    
    
    
    
  
  
    
  

node部分

先創(chuàng)建三個文件
index.js //入口
proxy.js //代理
server.js //主要配置

//server.js
const fs = require('fs');
const { resolve } = require('path');
const express = require('express');
const app = express();
const proxy = require('./proxy');
const { createBundleRenderer } = require('vue-server-renderer')

//模板地址
const templatePath = resolve(__dirname, '../public/index.nodeTempalte.html')
//客戶端渲染清單
const clientManifest = require('../dist/vue-ssr-client-manifest.json')
//服務(wù)端渲染清單
const bundle = require('../dist/vue-ssr-server-bundle.json')
//讀取模板
const template = fs.readFileSync(templatePath, 'utf-8')
const renderer = createBundleRenderer(bundle,{
  template,
  clientManifest,
  runInNewContext: false
})


//代理相關(guān)
proxy(app);
//請求靜態(tài)資源相關(guān)配置
app.use('/js', express.static(resolve(__dirname, '../dist/js')))
app.use('/css', express.static(resolve(__dirname, '../dist/css')))
app.use('/font', express.static(resolve(__dirname, '../dist/font')))
app.use('/img', express.static(resolve(__dirname, '../dist/img')))
app.use('*.ico', express.static(resolve(__dirname, '../dist')))


//路由請求
app.get('*', (req, res) => {
  res.setHeader("Content-Type", "text/html")
  //傳入路由 src/entry/server.js會接收到 使用vueRouter實例進(jìn)行push
  const context = {
    url: req.url
  }

  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.url) {
        res.redirect(err.url)
      } else {
        res.status(500).end('500 | 服務(wù)器錯誤');
        console.error(`${req.url}: 渲染錯誤 `);
        console.error(err.stack)
      }
    }
    res.status(context.HTTPStatus || 200)
    res.send(html)
  })
})
module.exports = app;



//proxy.js

const proxy = require('http-proxy-middleware');

function proxyConfig(obj){
  return {
    target:'localhost:8081',
    changeOrigin:true,
    ...obj
  }
}
module.exports = (app) => {
  //代理開發(fā)環(huán)境
  if (process.env.NODE_ENV !== 'production') {
    app.use('/js/main*', proxy(proxyConfig()));
    app.use('/*hot-update*',proxy(proxyConfig()));
    app.use('/sockjs-node',proxy(proxyConfig({ws:true})));
  }
}


//index.js
const app = require('./server')

app.listen(8080, () => {
 console.log('\033[42;37m DONE \033[40;33m localhost:8080 服務(wù)已啟動\033[0m')
})

做完這一步之后，就可以預(yù)覽基本的服務(wù)渲染了。

后面就只差開發(fā)環(huán)境的配置，以及到node數(shù)據(jù)的傳遞(vuex)

npm run build
npm run start:server
打開localhost:8080
F12 - Network - Doc 就可以看到內(nèi)容

最終目錄結(jié)構(gòu)

|-- vuessr
  |-- .gitignore
  |-- babel.config.js
  |-- package-lock.json
  |-- package.json
  |-- README.md
  |-- vue.config.js
  |-- nodeScript //node 渲染配置
  |  |-- index.js
  |  |-- proxy.js
  |  |-- server.js
  |-- public//模板文件
  |  |-- favicon.ico
  |  |-- index.html
  |  |-- index.nodeTempalte.html
  |-- src
    |-- App.vue
    |-- main.js
    |-- router.config.js//路由集合
    |-- store.config.js//vuex 集合
    |-- assets//全局靜態(tài)資源源碼
    |  |-- 備注.txt
    |  |-- img
    |    |-- logo.png
    |-- components//全局組件
    |  |-- Head
    |    |-- index.js
    |    |-- index.scss
    |    |-- index.vue
    |    |-- img
    |      |-- logo.png
    |-- entry//cli3入口
    |  |-- client.js
    |  |-- server.js
    |  |-- 備注.txt
    |-- methods//公共方法
    |  |-- 備注.txt
    |  |-- mixin
    |    |-- index.js
    |-- pages//源碼目錄
    |  |-- home
    |  |  |-- index.js
    |  |  |-- index.scss
    |  |  |-- index.vue
    |  |  |-- img
    |  |  |  |-- flow.png
    |  |  |  |-- head_portrait.jpg
    |  |  |  |-- logo.png
    |  |  |  |-- vuessr.png
    |  |  |-- vue
    |  |  |  |-- index.js
    |  |  |  |-- index.scss
    |  |  |  |-- index.vue
    |  |  |-- vueCli3
    |  |  |  |-- index.js
    |  |  |  |-- index.scss
    |  |  |  |-- index.vue
    |  |  |-- vueSSR
    |  |  |  |-- index.js
    |  |  |  |-- index.scss
    |  |  |  |-- index.vue
    |  |  |-- vuex
    |  |    |-- index.js
    |  |    |-- index.scss
    |  |    |-- index.vue
    |  |-- router//路由配置
    |  |  |-- index.js
    |  |-- store//vuex配置
    |    |-- all.js
    |    |-- gather.js
    |    |-- index.js
    |-- static//cdn資源
      |-- 備注.txt

以上是“構(gòu)建vueSSR項目之如何配置node以及vue-cli3”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：構(gòu)建vueSSR項目之如何配置node以及vue-cli3-創(chuàng)新互聯(lián)
本文地址：http://www.dlmjj.cn/article/dghosh.html