目前工作出現一個問題,多個專案均使用vue+webpack,並且專案之間有很多的元件或者方法都是相同的(貼上複製),整體佈局基本一樣(只是主題顏色有些許不同)。感覺這樣子後期維護繁雜,同一個問題需要修改很多遍。於是,在研究兩天之後,生成了一套新的專案結構,基本改善了上述問題。
先上一下工程結構:
The files tree is:
=================
|__ build
|__ build.js
|__ check-versions.js
|__ logo.png
|__ utils.js
|__ vue-loader.conf.js
|__ webpack.base.conf.js
|__ webpack.dev.conf.js
|__ webpack.prod.conf.js
|__ config
|__ dev.env.js
|__ index.js
|__ multipage.js
|__ multipage.project.js
|__ prod.env.js
|__ test.env.js
|__ dist
|__ admin
|__ favicon.ico
|__ index.html
|__ static
|__ css
|__ index.3a947c1c1f207832148c696e78c1f1bd.css
|__ index.3a947c1c1f207832148c696e78c1f1bd.css.map
|__ js
|__ index.3675151582d13b8e0c7e.js
|__ index.3675151582d13b8e0c7e.js.map
|__ manifest.2ae2e69a05c33dfc65f8.js
|__ manifest.2ae2e69a05c33dfc65f8.js.map
|__ vendor.7fed9fa7b7ba482410b7.js
|__ vendor.7fed9fa7b7ba482410b7.js.map
|__ master
|__ favicon.ico
|__ index.html
|__ static
|__ css
|__ index.7cb8a531774c9910737734e1c15db140.css
|__ index.7cb8a531774c9910737734e1c15db140.css.map
|__ js
|__ index.0f86190d29b252e0535a.js
|__ index.0f86190d29b252e0535a.js.map
|__ manifest.2ae2e69a05c33dfc65f8.js
|__ manifest.2ae2e69a05c33dfc65f8.js.map
|__ vendor.7fed9fa7b7ba482410b7.js
|__ vendor.7fed9fa7b7ba482410b7.js.map
|__ node_modules
|__ src
|__ admin
|__ components
|__ HelloWorld.vue
|__ config
|__ index.js
|__ pages
|__ index
|__ App.vue
|__ favicon.ico
|__ index.html
|__ index.js
|__ router
|__ index.js
|__ global
|__ assets
|__ logo.png
|__ master
|__ components
|__ HelloWorld.vue
|__ config
|__ index.js
|__ pages
|__ index
|__ App.vue
|__ favicon.ico
|__ index.html
|__ index.js
|__ router
|__ index.js
|__ static
|__ .gitkeep
|__ test
|__ .babelrc
|__ .editorconfig
|__ .gitignore
|__ .postcssrc.js
|__ package-lock.json
|__ package.json
|__ README.md複製程式碼
更加方便,非常適合多個專案的一套結構,開發時元件、工具函式等等全部可以共用,最重要的一點,不用每次都安裝vue-cli浪費時間。根據配置打包,不多說,有興趣可以來看看:一套Vue+Webpack佈置多個專案 | Vino部落格 一套Vue+Webpack佈置多個專案