使用Express部署Vue項目

目錄

1. 背景

2. 配置Vue CLI

1.1 安裝nodejs
1.2 創(chuàng)建vue-cli
1.3 創(chuàng)建vue項目
1.4 構建vue項目

3. 配置Express

2.1 安裝express
2.2 創(chuàng)建項目

4. 使用express部署vue項目

1，背景
我們想要做一個前后端分離的課程項目，前端框架準備使用Vue.js，并使用Express作為Node.js中間件進行部署，后端使用Java Servlet與數據庫交互。

但我在嘗試根據網絡上的一些教程將Vue.js構建好的項目部署到Express上時，發(fā)現頁面總是顯示不出來，HTML里的提示是

We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.

所以我嘗試在Vue CLI的官網尋找部署方案。發(fā)現官方推薦的部署在Express上的方案是使用connect-history-api-fallback中間件。于是我把具體的部署流程寫成了這篇筆記，方便學習和記錄。

2，配置Vue CLI

2.1. 安裝Node.js
前往官網https://nodejs.org/en/download/進行下載，圖形界面安裝，按照提示進行即可

Mac OS也可以用brew安裝

brew install node

2.2. 安裝Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看是否安裝成功
vue --version

2.3. 創(chuàng)建Vue項目

命令行進入一個你想安裝的文件夾，運行以下命令

vue create hello-world

你會被提示選取一個 preset。你可以選默認的包含了基本的 Babel + ESLint 設置的 preset，也可以選“手動選擇特性”來選取需要的特性。

這個默認的設置非常適合快速創(chuàng)建一個新項目的原型，而手動設置則提供了更多的選項，它們是面向生產的項目更加需要的。

運行項目

cd hello-world
npm run server

訪問顯示的url會出現Vue的歡迎界面

2.4. 構建Vue項目
通過Ctrl-C停止運行后，構建項目。打包好的文件會存放在dist文件夾下。

npm run build

但是dist文件夾下的index.html我們通過本地瀏覽器是打不開的，所以我們需要一個Node.js服務器，我使用的是Express。下面就進入Express的配置。

3. 配置Express
首先退出剛才創(chuàng)建的Vue項目文件夾
重新在別的地方選擇一個文件夾進行
通過 npm init 命令為你的應用創(chuàng)建一個 package.json 文件。

npm init

此命令將要求你輸入幾個參數，例如此應用的名稱和版本。 你可以直接按“回車”鍵接受大部分默認設置即可，下面這個除外：

entry point: (index.js)

鍵入 app.js 或者你所希望的名稱，這是當前應用的入口文件。如果你希望采用默認的 index.js 文件名，只需按“回車”鍵即可。

npm install express --save

3.2. 創(chuàng)建項目
通過應用生成器工具 express-generator 可以快速創(chuàng)建一個應用的骨架。

npx express-generator

對于較老的 Node 版本，請通過 npm 將 Express 應用程序生成器安裝到全局環(huán)境中并執(zhí)行即可。

npm install -g express-generator

express安裝時會提示文件夾非空，是否確定安裝，輸入y然后回車即可

npm install

npm start

然后在瀏覽器中打開 http://localhost:3000/ 網址就可以看到這個應用了。

4. 使用Express部署Vue項目
將Vue項目hello-world目錄中的dist文件夾復制到 Express項目myapp文件夾。

直接復制過去也可以，通過下面的命令行復制也可以。

mkdir dist
cp -a ../hello-world/dist/ ./dist

復制完成后，myapp文件夾的目錄樹應該是這樣的

xxx/myapp
├── app.js
├── bin
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── public
├── routes
└── views

安裝connect-history-api-fallback中間件

npm install --save connect-history-api-fallback

安裝完成以后，修改app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');var app = express();// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));// ----------------這兩行被我們注釋掉了-----------
// app.use('/', indexRouter);
// app.use('/users', usersRouter);
//---------------------------------------------// ----------------這三行是我們新添加的-----------
var history = require('connect-history-api-fallback');
app.use(express.static(path.join(__dirname, 'dist')));
app.use(history());
//---------------------------------------------// catch 404 and forward to error handler
app.use(function(req, res, next) {next(createError(404));
});// error handler
app.use(function(err, req, res, next) {// set locals, only providing error in developmentres.locals.message = err.message;res.locals.error = req.app.get('env') === 'development' ? err : {};// render the error pageres.status(err.status || 500);res.render('error');
});module.exports = app;

在我標記的地方加入了下面3條語句，將中間件加入了其中。并且注釋掉了前面的兩條語句，讓頁面自動訪問index.html。

// ----------------這兩行被我們注釋掉了-----------
// app.use('/', indexRouter);
// app.use('/users', usersRouter);
//---------------------------------------------// ----------------這三行是我們新添加的-----------
var history = require('connect-history-api-fallback');
app.use(express.static(path.join(__dirname, 'dist')));
app.use(history());
//---------------------------------------------

啟動Express

npm start

在瀏覽器中打開 http://localhost:3000/，看到Vue的界面就大功告成了。