從零開始搭建vue-ssr系列之二：純client端渲染以及webpack2+vue2注意事項

時間 2019-11-06

標籤開始搭建 vue ssr 系列之二 client 渲染以及 webpack2+vue2 webpack 注意事項简体版

原文原文鏈接

要實現什麼效果？

我們就實現一個項目中經常使用而且簡單的效果：經過Ajax從後端取數據，前端作展現，點列表的每一項，alert出這一項的標題
效果以下：

Client端的渲染？css

由於Client端的渲染是ssr渲染的一部分，這一塊是必需要說的，同時，Client端的渲染在我作的時候，也有一些問題和一些坑，尤爲是使用webpack2的時候，以前webpack1時代的東西大部分都很差使了，只能從新學，從新試，正好在這也分享給你們

項目目錄樹

|____.gitignore
|____build
| |____client
| | |____css
| | | |____main.css
| | |____script
| | | |____main.js
| | | |____vendors.js
| |____index.html
|____package.json
|____postcss.config.js
|____readme.md
|____server.js
|____src
| |____component
| | |____List.vue
| |____index.js
|____tools
| |____dev.js
| |____webpack.js

各目錄的用處

build目錄爲webpack打包好的靜態資源文件，css、js、image等
src目錄下存放源碼
tools目錄下爲編譯相關的文件
package.json文件爲包依賴
postcss.config.js這個文件很重要，vue-loader和這個文件，能解決css前綴問題（這裏用的是webpack2的解決方案，目測爲惟一的解決方案，webpack1有其餘解決方案）。
server.js爲服務啓動文件，用的是express
使用的是webpack的nodeAPI進行打包，不是經過config文件打包

這個webpack打包能實現哪些功能？

能夠把共用的js庫打到一個單獨的文件裏，代碼在這：

// 將vue等框架/庫進行單獨打包, 並輸入到vendors.js文件當中
new webpack.optimize.CommonsChunkPlugin({
    names: ['vendors']
})

能夠把.vue文件裏面的style都打包到一個css文件中，代碼在這：

new ExtractTextPlugin('css/[name].css')

有哪些坑？

alias裏面其餘的能夠不要，可是vue是必填，就是'vue$': 'vue/dist/vue.common.js'，要否則會報錯，由於你import vue的時候，不寫這個引用文件不是同一個，只有vue2裏會出這個問題，vue1不會
webpack2裏面想把.vue文件的css抽取出來，只有一個loader是很差使的，這個我找了很久，webpack.js裏面的方案好使
在dev.js裏面，webpack的nodeAPI裏面提供2個方法，一個run，一個是watch，開發的時候用watch，要上線了得用run這個方法