美文网首页Vue高级程序员
构建vue项目并发布在node服务上

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

作者: 壹家全栈 | 来源:发表于2018-09-17 18:20 被阅读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服务,写得不是很好,请见谅。

    相关文章

      网友评论

        本文标题:构建vue项目并发布在node服务上

        本文链接:https://www.haomeiwen.com/subject/ngwrnftx.html