Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染2创建Vue2+webpack4项目

前提

安装好nodejs并配置好环境变量，最好是 node10，https://nodejs.org/en/download/

参考我之前的文章

开始

初始化项目

首先创建一个文件夹webapp，并使用yarn初始化

yarn init

完整命令

➜  main git:(j2v8-version) ✗ mkdir webapp
➜  main git:(j2v8-version) ✗ cd webapp
➜  webapp git:(j2v8-version) ✗ pwd
/mnt/c/Users/Terwer/IdeaProjects/jvue/src/main/webapp
➜  webapp git:(j2v8-version) ✗ yarn init
yarn init v1.13.0
question name (webapp): jvue
question version (1.0.0):
question description: Next light-weight,responsive project With Vue,webpack,Spring Boot and eclipse j2v8 Script engine for server-side-rendering
question entry point (index.js): server.js
question repository url:
question author: Terwer
question license (MIT):
question private:
success Saved package.json
Done in 317.09s.
➜  webapp git:(j2v8-version) ✗

初始化类库

➜  webapp git:(j2v8-version) ✗ yarn
yarn install v1.13.0
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.

安装项目依赖

yarn add vue vue-router

安装webpack打包

yarn add -D webpack webpack-cli

项目结构

所有源码放在src子文件下

app.js : 项目入口

import Vue from "vue";
import App from "./App.vue";
new Vue({
  el: "#app",
  render: h => h(App)
});

App.vue: 根组件

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

pages: 页面，每个文件对应一个路由

components: 子组件

router: 路由配置

store: vuex配置(稍后添加)

config: 项目配置

eslint美化代码

yarn add -D  eslint babel-eslint eslint-config-google eslint-loader eslint-plugin-html eslint-plugin-vue @vue/eslint-config-prettier

.eslintrc.js

const config = require("./config");

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "google",
    "eslint:recommended",
    "plugin:vue/essential",
    "@vue/prettier"
  ],
  // required to lint *.vue files
  plugins: ["html"],
  settings: {
    "import/resolver": {
      webpack: {
        config: "build/webpack.base.conf.js"
      }
    }
  },
  // add your custom rules here
  rules: {
    "no-console": "off",

    // allow debugger; instruction during development
    "no-debugger": config.isProduction ? 2 : 0,

    "no-unused-vars": [
      2,
      {
        vars: "local",
        args: "none"
      }
    ],
    semi: ["error", "always"],

    // don"t require comma in the last line of an object/dictionary declaration
    "comma-dangle": ["error", "never"],

    // force space after and before curly braces in object/dict declarations
    "object-curly-spacing": ["error", "always"],

    // ignore max-len for comments
    "max-len": [
      "error",
      {
        code: 100,
        ignoreComments: true,
        ignoreTrailingComments: true,
        ignoreUrls: true,
        ignoreStrings: true
      }
    ],

    // force "===" in comparisons when ambiguous
    eqeqeq: ["error", "smart"],

    // force double quotes
    quotes: ["error", "double"],

    "require-jsdoc": 1,

    "new-cap": ["error", { capIsNew: false }]
  },
  parserOptions: {
    sourceType: "module",
    parser: "babel-eslint"
  }
};

package.json 添加命令

 "lint": "eslint --ext .js,.vue,.html --ignore-path .gitignore --ignore-pattern !.eslintrc.js --ignore-pattern !.babelrc.js . --fix --color",

webpack项目打包配置

安装 vue-loader

yarn add -D vue-loader vue-template-compiler vue-style-loader css-loader

首先配置非服务端渲染

安装 webpack-dev-server 以及 html-webpack-plugin

yarn add -D webpack-dev-server html-webpack-plugin

webpack.nossr.config.js

const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  node: {
    fs: "empty",
    module: "empty"
  },
  entry: "./src/app.js",
  module: {
    rules: [
      {
        test: /.vue$/,
        use: "vue-loader"
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.ejs",
      title: "Next Vue SSR Project for Java j2v8 Script engine",
      favicon: "./public/favicon.ico",
      inject: true
    })
  ],
  devServer: {
    host: "0.0.0.0",
    port: 8888
  }
};

package.json 添加命令

 "nossr": "webpack-dev-server --config build/webpack.nossr.config.js --progress"

查看结果

运行 yarn nossr ，查看结果