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


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值