vue-ssr-boilerplate

nuxt.js

A boilerplate for developing Server Side Render Vue.js Application

1.

Vue SSR

2.

,: npm i.

2.1

npm run dev .

2.2

,,,:

npm run build && npm start #  pm2, npm run pm2

service-worker(pwa), https , build/webpack.client.conf.js SWPlugin ,:

new SWPrecachePlugin({
  cacheId: 'vue-ssr-justemit',
  filename: 'service-worker.js',
  minify: true,
  //  false, sw filename?hash 
  dontCacheBustUrlsMatching: false,
  // 
  staticFileGlobsIgnorePatterns: [/\.map$/, /\.css$/],
  // For unknown URLs, fallback to the index page
  navigateFallback: 'https://example/', //  
  // 
  runtimeCaching: [ // 
    {
      urlPattern: '/',
      handler: 'networkFirst'
    },
    {
      urlPattern: /\/(page1|page2|page3)/,
      handler: 'networkFirst'
    }
  ]
}

: https://example.com/ , service-worker https://example.com/ , https://example.com/page1 /page1 .

: https://example.com/page1 ( , entry-server), service-worker ,.

.(:

3

Vue

src
 components # 
 router # vue-router
 store # vuex store
 App.vue
 app.js #  entry(universal entry)
 entry-client.js # 
 entry-server.js # 

• app.js

  app.js Vue DOMapp.js createApp

• entry-client.js

  DOM

  import { createApp } from './app'
  
  const { app } = createApp()
  app.$mount('#app')
  

• entry-server.js

  export default

vue-router``vuex

4

4.1 window

window

4.2

jest vue-test-utils vuex store

import { createStore } from '@/store'

const store = createStore()

test('test', () => {
  const wrapper = shallow(Component, { store })
})

5

LICENSE

MIT