vue.js打包部署上线步骤
这里简单记录一下vue项目打包部署服务器的过程以及出现的问题,以便后续学习。。。我们使用cnpm run dev 运行项目,只是在本地开发环境中进行测试,一旦将项目部署到服务器上就会出现各种问题,如axios请求跨域、css样式失效、图片失效、地址跳转404等一系列问题。。。这里主要简单介绍一下解决方案,需求:将项目成功打包部署到linux下,能成功访问到页面。步骤一:修改config in...
这里简单记录一下vue项目打包部署服务器的过程以及出现的问题,以便后续学习。。。
我们使用cnpm run dev 运行项目,只是在本地开发环境中进行测试,一旦将项目部署到服务器上就会出现各种问题,如axios请求跨域、css样式失效、图片失效、地址跳转404等一系列问题。。。这里主要简单介绍一下解决方案,
需求:将项目成功打包部署到linux下,能成功访问到页面。
关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端,Java,微信小程序,Python等资源,让我们一起学前端。
步骤一:修改config index.js文件中的打包配置
步骤二、修改build.下的utils.js (解决css背景图片失效问题)
增加 publicPath:’…/…/’,
步骤三、进入vue项目根目录下使用命令 cnpm run build 打包项目,成功后会出现dist文件夹,里面含有static文件夹、index.htm
步骤四、将生成的dist下文件复制到服务器下的njed-app文件夹下
步骤五、测试,访问:http://www.mofunenglish.com/vue/index.html#/home
ps:axios跨域问题,
方式1:服务器端设置跨域
header(“Access-Control-Allow-Origin:*”);
header(“Access-Control-Allow-Headers:content-type”);
header(“Access-Control-Request-Method:GET,POST”);
方式2:在config下index.js中设置一个代理服务器,使用proxyTable 我比较推荐这种方法。
首先在config/index.js 里面找到proxyTable :{} ,然后在里面加入
'/api': {
target: 'http://71.158.4.120:8080/',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '/'
//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调
//用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
}
方式3:使用jsonp方式。
Vue项目通过Hbuild打包为APP后,静态文件正常显示,但并没有像开发时那样请求到数据。
这是为什么?因为APP并没有跨域,不存在跨域一说。
我们在开发的时候,js在不同的域之间进行数据传输或通信,所以会给项目设置代理来跨域
config下的index.js
比如这个
proxyTable: {
'/api':{
target: 'http://XXX/xxx/v3',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
在开发时这样做是没错的,但我们在打包时就不用设置这个跨域了,打包前直接将这个跨域注释掉,然后将API请求地址改为绝对地址。例如这样
let SwipeImg = () => axios({
// url: 'api/basic/advert/lists',
url: 'http://xxx.xxx.xx.xx/api/v3/basic/advert/lists',
params: {
auth_key: key
}
})
改好之后在通过Hbuild打包后,APP数据就显示正常了
这里要注意的是,我将打包后的APP放在夜神模拟器里,数据显示还是不正常,但放在自己手机里就显示正常,这点要注意
更多推荐
所有评论(0)