VUE---编译打包

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Miracle_Gaaral/article/details/89007001

一.执行npm run build   ,会生成一个dist目录

        manifest.js     维护静态资源的清单

        vendor.js       node  modules生成的 

        app.js         源码生成的

二.可以自己写一个测试的node服务   prod.server.js

var express = require('express')
var config = require('./config/index')
var axios = require('axios')

var app = express()
var apiRoutes = express.Router()

apiRoutes.get('/getDiscList',(req, res)=> {
	var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
	axios.get(url, {
	  headers:{
	    referer: 'https://c.y.qq.com/',
	    //host: 'c.y.qq.com'
	  },
	  params: req.query
	}).then((response)=>{
	  res.json(response.data)
	}).catch((e)=>{
	  console.log(e)
	})
}),
apiRoutes.get('/getSearchResult',(req, res)=> {
	var url = 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp'
	axios.get(url, {
	  headers:{
	    referer: 'https://c.y.qq.com/',
	    //host: 'c.y.qq.com'
	  },
	  params: req.query
	}).then((response)=>{
	  //res.json(response.data)
	  var ret= response.data
	  if(typeof ret === 'string'){
	    var reg = /^\w+\(([\s\S]*)\)$/
	    var matches = ret.match(reg)
	    if(matches){
	      ret = JSON.parse(matches[1])
	    }            
	  }
	  res.json(ret) 
	}).catch((e)=>{
	  console.log(e)
	})
}),
apiRoutes.get('/getSongList',(req, res)=> {
	var url = 'https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg'
	axios.get(url, {
	  headers:{
	    referer: 'https://c.y.qq.com/',
	    //host: 'c.y.qq.com'
	  },
	  params: req.query
	}).then((response)=>{
	  //res.json(response.data) 
	  var ret= response.data
	  if(typeof ret === 'string'){
	    var reg = /^\w+\(([\s\S]*)\)$/
	    var matches = ret.match(reg)
	    if(matches){
	      ret = JSON.parse(matches[1])
	    }            
	  }
	  res.json(ret)       
	}).catch((e)=>{
	  console.log(e)
	})
}),
apiRoutes.get('/getSongVkey',(req, res)=>{
	var url = 'https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg'
	axios.get(url, {
	  headers:{
	    referer: 'https://c.y.qq.com/',
	    host: 'c.y.qq.com'
	  },
	  params: req.query
	}).then((response)=>{
	  res.json(response.data)          
	}).catch((e)=>{
	  console.log(e)
	})
}),
apiRoutes.get('/lyric',(req, res)=>{
	var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
	axios.get(url, {
	  headers:{
	    referer: 'https://c.y.qq.com/',
	    host: 'c.y.qq.com'
	  },
	  params: req.query
	}).then((response)=>{
	  var ret= response.data
	  if(typeof ret === 'string'){
	    var reg = /^\w+\(({[^()]+})\)$/
	    var matches = ret.match(reg)
	    if(matches){             
	      ret = JSON.parse(matches[1])
	    }
	  }
	  res.json(ret)
	}).catch((e)=>{
	  console.log(e)
	})
})

app.use('/api', apiRoutes)

app.use(express.static('./dist'))

var port = process.env.PORT || config.build.port

module.exports = app.listen(port, function(err){
	if(err){
		console.log(err)
		return
	}
	console.log('listening at http://localhost' + port +'\n')
})

三.执行node  prod.server.js启动生产环境服务

四.优化app.js的体积大小

        在路由中使用"路由懒加载"

const Recommend = () => import('components/recommend/recommend')
const Singer = () => import('components/singer/singer')
const Rank = () => import('components/rank/rank')
const Search = () => import('components/search/search')
const SingerDetail = () => import('components/singer-detail/singer-detail')
const Disc = () => import('components/disc/disc')
const TopList = () => import('components/top-list/top-list')
const UserCenter = () => import('components/user-center/user-center')

五.对vuejs和vuex   vue-router升级

修改pakeage.json文件中对应的版本号

注意dependencies中vue-template-compiler的版本号和vue版本号相同,不然编译会报错

cnpm install