vue项目怎么打包上线,本文采用nodejs框架egg(与koa2类似,可兼容koa2的模块)来演示将vue部署到node服务中,避免通过配置Nginx来实现
首先将vue打包后的dist文件夹下的static下的资源放置到egg工程下app/dist文件夹中,下图是在congfig.js配置文件中修改静态资源文件的路径与vue中一致。
在 package.json 中新增一条打包命令,其中 packages/index.js 指定打包入口文件 默认情况下该命令不会将 Vue 打包进去,因为任何引用我们库的Vue项目都默认包含 Vue ,如果使用文件或者CDN方式引入我们的库,则需要使用者手动。
项目目录如下:
紧接着将vue打包后的dist下的index.html放置到egg工程目录下view/dist(为了区分本工程原有文件)中;路由配置如下,注意其中有一个解决vue的history模式的刷新出现404的问题
4、在main.js中将ip添加到vue原型中:Vue.prototype.ip = window.ip;5、最后在需要调用 的地方直接使用this.ip即可。6、打包之后的目录结构,如果服务器的ip地址发生了变化,可直接修改server.js文件,然后保存。
配置到此项目可以启动,访问localhost:xxxx可以访问到vue打包后的index.html
最后我们开始解决vue工程中的跨域接口代理问题;
写一个中间件,此处配置与vue中相同
vue代理配置:
不要忘记在egg配置文件中启用中间件:
然后我们就可以愉快的访问项目了
1.vue项目打包---npm run build 2.在HBuilder中新建5+app项目 3.把5+app项目中删除js css等文件 只剩manifest.json 文件 4.复制vue项目打包后的dist目录中所有文件到5+app项目 5.HBuilder中发布--》app云打包 注意。