摘要:前段時間項目組計劃快速開發一個新的項目,開發那邊提供殼子和部分系統級功能,所有的頁面由完成,考慮兼容性安卓及。后面會繼續優化,先把目前的基本部署方式記錄下來。
前段時間項目組計劃快速開發一個新的App項目,App開發那邊提供殼子和部分系統級功能,所有的頁面由h5完成,考慮兼容性安卓4.1及ios7.1。全新的項目,沒有歷史包袱,就嘗試了新的開發模式,采用了webpack + vue-cli + vue-router + es6 + axios這一套,從webpack配置到文件目錄,從開發流程到上線部署,摸索嘗試,到目前第一版已經上線。后面會繼續優化,先把目前的基本部署方式記錄下來。
webpack -- ^3.6.0 | vue -- ^2.5.2 | vue-router -- ^3.0.1 | axios -- ^0.17.1簡介
項目采用前后端分離,后端開發只負責提供接口及靜態服務器
前端采用多個入口、多個單頁(每個單頁可能含vue-router路由到不同的子頁面)的方式,最終在dist下生成多個.html及對應的.js/.css文件
域名根目錄直接指向到npm run build之后生成的dist目錄,可以通過http://m.example.com/index.html直接訪問到index.html
最終生成的dist目錄類似于:
dist
index.html
center/
index.html
regist.html
login.html
static/
js/
vendor.[chunkhash].js
index.[chunkhash].js
regist.[chunkhash].js
login.[chunkhash].js
css/
index.[chunkhash].css
regist.[chunkhash].css
login.[chunkhash].css
例:http://m.example.com/index.html可以訪問到首頁,http://m.example.com/center/regist.html則訪問到注冊頁,而http://m.example.com/center/regist.html#agreement訪問到用戶協議頁
目錄結構dist: 如上,不跟隨版本控制
build: webpack構建相關配置
config: 開發相關配置
webpack.user.conf.js: 新建的自定義配置文件,理論上對webpack的配置更改都在這里進行,然后對webpack.dev.conf.js和webpack.dev.prod.js進行merge覆蓋
node_modules: 插件及依賴,不跟隨版本控制
src: 開發目錄
assets: 存放靜態資源,含base.js/base.css/plugins/images
components: 一些可能公用的小組件
entry: webpack打包的入口文件,有多個HtmlWebpackPlugin的實例,每個實例都對應一個入口,每個入口打包出一個頁面
router: 某些頁面可能會用到vue-router實現前端路由,統一在此文件夾下定義,會被entry中的入口js引入使用
template: 存放HtmlWebpackPlugin打包基于的模板頁,多個入口可以共用一個模板頁。但實際開發中可能某些入口有私有的邏輯,需多帶帶創建模板
page: 存放實際頁面組件及組裝頁面
package.json: 包信息及依賴
例:如果我們想最終生成http://m.example.com/center/regist.html且含有前端路由的話,需要涉及到的文件有:
1. src/entry/regist.js,以創建入口文件,供`HtmlWebpackPlugin`使用 2. config/webpack.user.conf.js,新建入口,指定入口文件為`src/entry/regist.js`;新建`HtmlWebpackPlugin`實例,指定打包后生成的文件路徑、文件名及js 3. src/router/regist.js,因為涉及到前端路由,需要配置路由信息 4. page/center/regist.vue、page/center/agreement.vue,進行頁面自身邏輯樣式的開發webpack配置
默認的webpack配置大體是采用build/webpack.base.js + build/webpack.dev.js/build/webpack.prod.js merge后的結果,為了方便實現統一配置,在config下新建了webpack.user.conf.js,再分別和build/webpack.dev.js/build/webpack.prod.js merge,因此頁面的配置,基本都在webpack.user.conf.js進行。
配置項
context: 設置在package.json所在的根目錄
entry: 設置為src/entry/
ouput: 生產環境設置為/src/dist/,開發環境默認打包后放在內存中,不代表實際物理路徑,output具體配置:
output: { path: path.resolve(__dirname, "../dist"), filename: "static/js/[name].[chunkhash:16].js", chunkFilename: "static/js/[id].[chunkhash:16].js", publicPath: "/pailifan/" }
plugins: 插件配置
HtmlWebpackPlugin: new多個實例,每個實例對應一個單頁
CommonsChunkPlugin: 公共模塊提取打包,默認指定將[vue.js -v2.5.2, vue-router.js -v3.0.1]打包,同時設置minChunks為Infinity以防止其他公用模塊被打包進來
new webpack.optimize.CommonsChunkPlugin({ name: "vendor", /*在entry中指定vendor對應的模塊為[vue.js,vue-router.js]*/ filename: "static/js/vendor.[chunkhash:16].js", minChunks: Infinity })需求開發及部署流程
拉取代碼
切換到package.json所在根目錄,執行npm i && npm run dev
新建頁面(見目錄結構部分的例)或者修改
提交代碼,忽略目錄包括src/dist、src/node_modules
內測/外測/灰度/生產,執行npm i && npm run build,生產環境不能直接操作dist目錄(npm run build實際會先刪除dist目錄再生成,直接操作會導致發布時文件404),需先在發布機生成dist后覆蓋到生產服務器對應的dist目錄
版本回退,回退代碼,然后執行npm i && npm run build,同發布一致
其他第三方插件和庫axios: ajax庫,部分坑已經另一篇筆記中進行了解釋及提出解決方案
vue-touch: 手勢庫
es6-promise: 對Promise進行pollyfill
附: vue-cli + es6 + axios項目踩坑
附:webpack.user.conf.js,會在webpack.base.conf.js、webpack.dev.conf.js和webpack.dev.prod.js進行merge合并
const path = require("path") const fs = require("fs") const webpack = require("webpack") const merge = require("webpack-merge") const HtmlWebpackPlugin = require("html-webpack-plugin") const config = require("../config") const defaultHtmlWebpackConfig = { template: "./src/template/index.html" minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: "dependency" } module.exports = { context: path.resolve(__dirname, "../"), output: { path: path.resolve(__dirname, "../dist"), filename: "static/js/[name].[chunkhash:16].js", chunkFilename: "static/js/[id].[chunkhash:16].js", publicPath: "/" }, CommonsChunkPlugin: { Dev: [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", filename: "vendor.js", minChunks: Infinity }) ], Prod: [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", filename: "static/js/common/vendor.[chunkhash:16].js", minChunks: Infinity }) ] }, entry: { vendor: ["vue", "vue-router", "es6-promise"], index: "./src/entry/index/index.js", login: "./src/entry/center/login.js" }, HtmlWebpackPlugin: [ // 首頁:index.html new HtmlWebpackPlugin(merge(defaultHtmlWebpackConfig, { title: "首頁", filename: path.resolve(__dirname, "../dist/index.html"), chunks: ["vendor", "index"] })), // 登錄注冊頁:center/login.html new HtmlWebpackPlugin(merge(defaultHtmlWebpackConfig, { title: "登錄", filename: path.resolve(__dirname, "../dist/center/login.html"), chunks: ["vendor", "login"] })) ] }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93577.html
摘要:作為目前最熱門最具前景的前端框架之一,其提供了一種幫助我們快速構建并開發前端項目的新的思維模式。的新版本,的簡稱。的包管理工具,用于同一管理我們前端項目中需要用到的包插件工具命令等,便于開發和維護。 Vue.js作為目前最熱門最具前景的前端框架之一,其提供了一種幫助我們快速構建并開發前端項目的新的思維模式。本文旨在幫助大家認識Vue.js,了解Vue.js的開發流程,并進一步理解如何通...
摘要:前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。 前言 一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。 書簽源碼 書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...
摘要:樣式通過標簽包裹,默認是影響全局的,如需定義作用域只在該組件下起作用,需在標簽上加,如要引入外部文件,首先需給項目安裝依賴包,打開,進入項目目錄,輸入回車。 showImg(https://segmentfault.com/img/remote/1460000013235090); (一)安裝node.js 首先需要安裝node環境,可以直接到中文官網http://nodejs.cn/...
摘要:前言本文系統的梳理了搭建項目的常見用法,目的在于讓你快速掌握獨立搭建項目的能力。思維導圖接下來,我們根據思維導圖,一步步來解釋和實現我們的目標。這確保了最終包里數量的最小化。但是如果其中一個依賴需要特殊的,默認情況下無法將其檢測出來。 前言 本文系統的梳理了vue-cli3搭建項目的常見用法,目的在于讓你快速掌握獨立搭建vue項目的能力。你將會了解如下知識點: 如何安裝項目插件 添加...
閱讀 870·2021-11-18 10:02
閱讀 1671·2019-08-30 15:56
閱讀 2570·2019-08-30 13:47
閱讀 2639·2019-08-29 12:43
閱讀 851·2019-08-29 11:19
閱讀 1783·2019-08-28 18:23
閱讀 2669·2019-08-26 12:23
閱讀 3007·2019-08-23 15:29