vue express全棧webpack腳手架

2021-10-08 08:54:12 字數 2342 閱讀 1536

2.引入webpack dllreferenceplugin,提前打包公共**(polyfill和vue全家桶),提高構建速度;

3.支援less、sass,支援postcss配置,自動引入polyfill(可刪除);

3.手動搭建webpack腳手架,脫離vue-cli,可自我根據需要自定義調整webpack配置;

4.一經執行,即可同時執行客戶端和服務端,並針對dev和prod環境做區分。dev環境使用webpack devserver中的express插槽,prod環境使用express static對映前端靜態檔案

webpack4 + es6 + vue + express

git clone

cd vue-server-template

#安裝依賴

npm install

#打包lib

npm run postinstall

#本地開發

npm run dev

#線上執行

npm start

#訪問位址

#打包lib(npm install時自動呼叫該鉤子)

npm run postinstall

#執行webpack.dll.js,打包lib

npm run build-lib

#本地執行

npm run dev

#打包客戶端

npm run build-client

#client-server打包

npm run build-server

#使用pm2執行工程

npm run start-project

#線上執行工程

npm start

├── build                       // webpack配置

│ ├── webpack.client.js // webpack client端打包配置

│ ├── webpack.dll.js // webpack dllplugin打包配置

│ ├── webpack.server.js // webpack server端打包配置

├── lib // dllplugin 相關lib

├── src // 源**

│ ├── client // client客戶端源**

│ │ ├── assets // 靜態資源

│ │ ├── components // 公用元件

│ │ ├── layout // 布局元件

│ │ ├── views // 頁面路由元件

│ │ ├── stores // store,狀態管理

│ │ ├── tool // 通用公共函式

│ │ ├── index.html // html模板

│ │ ├── main.js // 入口

│ ├── server // server 源**

│ │ └── route.js // express路由中介軟體配置

├── static // 靜態檔案目錄

├── babele.config.js // babel-loader 配置

├── config // 工程全域性公共配置(port、host等)

├── postcss.config.js // postcss-loader 配置

├── .editorconfig // 編輯器配置

├── .gitignore // git 忽略項

├── package-lock.json // npm 鎖檔案

├── package.json // npm 配置

├── pm2.json // pm2 入口

├── readme.md // readme 文件

全棧初始構建指令vue express

npm install express generator g npm run install 安裝依賴包 生成 package.json 檔案 npm startvar port normalizeport process.env.port 3000 npm install webpack gwe...

Web全棧課程4 資料互動 http

http所有的資料請求對於伺服器的處理來說,都是表單提交 除了websocket 表單ajax jsonp websocket 1 3個版本 http1.0 http1.1 http2.0 2 http和https http 容易被攻擊被竊聽 https http secrity 安全,https需...

javascript全棧開發實踐 web 2

我們目前僅僅測試實現了鉛筆的功能。接下來我們繼續增加乙個新的功能 螢光筆。螢光筆通常是帶有一定顏色,並且具有半透明特性,可以把下面的字跡顯露出來。而為了在鉛筆和螢光筆之間進行切換,我們就需要增加兩個按鈕,來實現這個切換功能。如下 background lightgrey pencil onclick...