vue cli es6 多頁面專案開發及部署

webpack -- ^3.6.0  |   vue -- ^2.5.2    | vue-router -- ^3.0.1  |    axios -- ^0.17.1

簡介

最終生成的dist目錄類似於：

static/

css/

例：可以訪問到首頁，則訪問到註冊頁，而#agreement訪問到使用者協議頁

目錄結構

node_modules: 外掛程式及依賴，不跟隨版本控制

src: 開發目錄

package.json: 包資訊及依賴

例：如果我們想最終生成且含有前端路由的話，需要涉及到的檔案有：

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.jsmerge後的結果，為了方便實現統一配置，在config下新建了webpack.user.conf.js，再分別和build/webpack.dev.js/build/webpack.prod.jsmerge，因此頁面的配置，基本都在webpack.user.conf.js進行。

output:

new webpack.optimize.commonschunkplugin()

需求開發及部署流程

拉取**

切換到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，同發布一致

其他第三方外掛程式和庫

附:

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 = ,
chunkssortmode: 'dependency'
}module.exports = ,
commonschunkplugin: )
],prod: [
new webpack.optimize.commonschunkplugin()]},
entry: ,
htmlwebpackplugin: [
// 首頁：index.html
new htmlwebpackplugin(merge(defaulthtmlwebpackconfig, )),
// 登入註冊頁：center/login.html
new htmlwebpackplugin(merge(defaulthtmlwebpackconfig, ))
]}

vue cli es6 多頁面專案開發及部署

vue cli es6轉es5 保證瀏覽器相容性

webpack配置多頁面專案

在多頁面專案下使用Webpack Vue

vue cli es6 多頁面專案開發及部署

vue cli es6轉es5 保證瀏覽器相容性

webpack配置多頁面專案

在多頁面專案下使用Webpack Vue

相關推薦