環(huán)境搭建
- 首先要安裝
vue-cli和express-generator
$ npm install vue-cli -g
$ npm install express-generator -g
- 使用手腳架搭建vue環(huán)境和express環(huán)境
# pwd /var/http/
$ vue init webpack project1
$ cd project1
$ npm install
# pwd /var/http/project1/
$ express server
$ cd server
$ npm install
- 添加MongoDB驅(qū)動办斑。MongoDB的安裝非本文重點朽肥，請自行Google方法或見win10安裝MongoDB
# pwd /var/http/project1/server/
$ npm install mongodb --save
$ npm install mongoose --save
- 以上我們完成了基本環(huán)境的搭建，如圖
基本架構(gòu)
細節(jié)調(diào)整
我們想要的效果是昔期，Vue編譯后直接放在server的public里面驹尼，然后運行Express后可以直接訪問。
- 首先修改Vue編譯后的存放地址
# 進入config/index.js文件晾蜘，修改index和assetsRoot的地址
...
index: path.resolve(__dirname, '../server/public/index.html'),
assetsRoot: path.resolve(__dirname, '../server/public'),
...
- 修改package.json的script命令
# 進入package.json，添加server命令
...
"scripts": {
"dev": "node build/dev-server.js",
"server": "node server/bin/www",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
...
- 添加favicon.ico和修改express的index路由
# 將favicon.ico文件放入server/public文件夾下
# 進入server/app.js眠屎，將app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))前的注釋去掉
# 進入server/routes/index.js，按如下修改
router.get('/', function(req, res, next) {
// res.render('index', { title: 'Express' });
res.redirect('/public/index.html');
});
測試運行
- 編譯Vue代碼
# pwd /var/http/project1/
$ npm run build
- 運行express服務(wù)器
# pwd /var/http/poject1/
$ npm run server
- 瀏覽器打開
http://localhost:3000
效果預(yù)覽
