vue-cli打包过程及打包后与node交互实现

个人博客网站实现过程如下：

1. 完成静态页面的布局。通过vue-cli框架
2. 连接数据库，完成后台搭建
3. 采用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必须关闭，否则冲突。