Vue高级程序员

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

2018-09-17  本文已影响307人  壹家全栈

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服务,写得不是很好,请见谅。

上一篇下一篇

猜你喜欢

热点阅读