本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。
将vue.js部署到本地的方法:
1、找到 bulid/webpack.dev.conf.js 文件,在该文件最后添加以下语句:
var port = process.env.PORT || config.dev.port const express = require('express') var apiServer = express() var bodyParser = require('body-parser') apiServer.use(bodyParser.urlencoded({ extended: true })) apiServer.use(bodyParser.json()) var apiRouter = express.Router() var fs = require('fs') apiRouter.route('/:apiName') .all(function (req, res) { fs.readFile('./db.json', 'utf8', function (err, data) { if (err) throw err var data = JSON.parse(data) if (data[req.params.apiName]) { res.json(data[req.params.apiName]) } else { res.send('no such api name') } }) }) apiServer.use('/api', apiRouter); apiServer.listen(port+1, function (err) { if (err) { console.log(err) return } console.log('Listening at https://localhost:'+(port+1)+'\n'); })
2、在index.html同级目录中添加 db.json 文件
db.json数据如下:
{ "login": { "username": "yudongdong", "userId": 123123 }, "getPrice": { "amount": 678 }, "createOrder": { "orderId": "6djk979" } }
3、在 config/index.js 文件中两处可修改位置如下:
4、运行 npm run dev
-
访问localhost:3000,可显示项目页面
-
访问localhost:3000/api/login,可以访问模拟数据
-
也可以访问localhost:3001/api/login,可以访问模拟数据
5、npm install vue-resource –save ,即可访问模拟服务器中的数据接口
以上就是如何将vue.js部署到本地的详细内容,更多请关注其它相关文章!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。