构建vue项目并发布在node服务上

1、最终目的

使用vue构建前端项目页面,前后端分离,前端项目需要发布在node服务器上。

2、所用技术有

客户端使用:vue+webpack

服务端则使用:node+koa.js

3、项目搭建步骤如下:

客户端搭建(开发时搭建)

》新建项目文件夹,文件夹取名随便你,最好使用英文小写。我这里叫ambers

》在项目文件夹下,新建两个文件夹:

1、client文件夹:用于开发

2、server文件夹:用于发布

》进入client文件夹使用

npm install vue-cli -g 全局安装vue

》项目初始化

vue init webpack 


当你看到那个npm run dev的时候说明你已经初始化项目成功啦

》运行项目并打包

npm run dev

使用localhost:8080打开,即可运行项目

服务端搭建(用于项目发布,可在项目完成后发布时再搭建)

》进入server文件夹使用以下命令进行初始化

npm init 

》安装koa

npm i koa --save-dev

》安装依赖

npm i koa-static --save-dev

》新建app.js文件夹,将打包好的client里面打包好的dist文件夹copy到server文件夹下。

app.js文件配置如下:


app.js

修改package.josn配置

》服务端运行项目:

进入server文件夹使用:

npm run start

使用localhost:端口号即可访问发布好的项目啦!


第一次搭建vue项目和node服务,写得不是很好,请见谅。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 轻松满足过生活 小时候爸爸经常会因为妈妈做的事不合他心意骂妈妈,妈妈也一定回敬让爸爸生气的话,他们会因为一些小事就...
    王文琦阅读 1,209评论 0 0
  • 最初的互联网,很“单纯”,搞互联网的,就专心搞互联网,比如曾经的百度搜索,和腾讯QQ等,甚至可以包括阿里巴巴。 随...
    懒人聊科技阅读 2,047评论 0 0
  • 首先在布局嵌套Android.support.v4.view.ViewPager 可以在写个LinearLayou...
    加减乘除_阅读 1,612评论 0 0
  • 我曾不止一次的幻想着你的来临,甚至做梦都有你的故事,你歪歪撞撞的走到我怀里,我和全世界所有的人都笑开了花。 我和你...
    不悔将来阅读 1,774评论 0 1
  • 版权声明:本文为 「cdeveloper」 原创文章,可以随意转载,但必须在明确位置注明出处! 在毕设项目中需要使...
    登龙zZ阅读 4,191评论 0 0