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必须关闭，否则冲突。