vue-cli打包过程及打包后与node交互实现
个人博客网站实现过程如下:完成静态页面的布局。通过vue-cli框架连接数据库,完成后台搭建采用vue-resource做交互本地运行没有任何问题。运行方法是:先启动数据库,然后启动后台node index,然后再npm run dev启动项目。项目目录如下:--build--config--node_modules--server--acti
·
个人博客网站实现过程如下:
- 完成静态页面的布局。通过vue-cli框架
- 连接数据库,完成后台搭建
- 采用vue-resource做交互
本地运行没有任何问题。
运行方法是:先启动数据库,然后启动后台node index,然后再npm run dev启动项目。
项目目录如下:
--build --config --node_modules --server --actions --db --routers --models --node_modules --schemas --index.js --package.json --src --static --.babelrc
...--package.json
vue运行在8080端口,node运行在8088端口。并在config目录下配置了index.js,这样就实现了前后端的交互。代码如下:
proxyTable: {
'/api': {
target: 'http://localhost:8088/api/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
下面依次做说明。
1.打包前准备
1.config目录下index.js文件assetsPublicPath: '/',改成 assetsPublicPath: './',(切记有两处);
2.我的背景图片是在css代码中直接添加的,要想打包的时候能够正确读取,需修改build文件夹下utils.js添加代码(此步骤不可少,有详细说明。http://blog.csdn.net/shuhaha/article/details/78257448)
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../' //添加的
})
}
做完准备后打包生成dist文件夹。
2.打包完成后继续可以交互
1.package.json文件修改
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"start": "node server/index.js"
}
注意我这里的start的路径,是相对
package.json文件的。
2.server文件夹下index.js文件的修改
新增如下代码:
app.use(express.static(path.join(__dirname,'../dist')));
注意加的位置。完整代码如下:
var express=require('express')
var path = require('path')
var app=express()
var mongoose=require('mongoose')
var bodyParser=require('body-parser')
app.use(bodyParser.urlencoded({ extended:false }));
app.use(express.static(path.join(__dirname,'../dist')));
app.use('/ads',require('./routers/admin'))
app.use('/api',require('./routers/api'))
mongoose.connect('mongodb://localhost:27017/wawa',{useMongoClient: true},function(err){
if(err){
console.log('数据库连接失败')
}else{
app.listen(8088)
console.log('数据库连接成功,端口8088正在监听...')
}
})
然后npm run start又可以访问进行交互了。
最后加一句:务必启动数据库,然后之前的node index必须关闭,否则冲突。
更多推荐
已为社区贡献2条内容
所有评论(0)