vue 打包后的文件部署到express服务器上的方法

vue 简介

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

vue是目前最流行的前端框架，今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发。

1、首先用vue-cli初始化项目目录

vue init webpack pro-name
cd pro-name && npm install
npm run dev

看到127.0.0.1:8080端口出现vuejs的欢迎界面表示成功。

到这里，前端vue的部署就完成了。

2、安装部署express

npm install express body-parser  --save 
然后在项目的根目录添加app.js 作为启动express服务器的代码

const express = require('express')
const app = express()
app.use('/',(req,res) => {
 res.send('hello express!')
})
app.listen(3000,() => {
 console.log('app listening on port 3000.')
})

执行：node app.js

打开浏览器访问127.0.0.1:3000，出现“hello express” 者说明express部署成功

3、对vue进行打包

执行：npm run build

打包后的文件存放于dist文件夹中，vue经过webpack打包之后生成dist文件夹，里面有个index.html，他是前端页面和服务端的对接页面。

4、修改app.js

在express中加入app.use(express.static(path.join(__dirname,

'dist')))；app.js 代码如下：

const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'dist')))
app.listen(3000,() => {
 console.log('app listening on port 3000.')
})

5、启动express

在启动express之前，需要修改packge.json 里面的配置：

"scripts": {
 "dev": "node build/dev-server.js",
 "build": "node build/build.js",
 "server": "nodemon app.js",
 "start": "node app.js"
 },

然后执行：npm run start

此时就可以通过127.0.0.1:3000访问到vue的欢迎界面了。

总结

以上所述是小编给大家介绍的vue 打包后的文件部署到express服务器上的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'

  • nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)

    nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)

    准备工作: 1.安装nodejs ---还用我教了? 2.安装依赖包express4.x  点这里>>>nodeJS搭建本地服务器 3.安装vue-cli脚手架 点这里>>>vue-cli构建vue项目 这里强调一下,express是后端服务器,它是一个独立的服务器,vue启动的是前端服务器,vue-cli中已经集成了一个小型的express,这两个服务器是分开放的,但是它们都是基于nodejs的. nodeJS部分:这里我已经认为你搭建好了express服务器,并且能

  • 详解vue express启动数据服务

    这两天学习了一下vue和express结合,本文记录一下vue express启动数据服务 记录一下配置 build->dev.sever.js配置 var apiServer = express() var bodyParser = require('body-parser') apiServer.use(bodyParser.urlencoded({ extended: true })) apiServer.use(bodyParser.json()) var apiRouter = exp

  • vue 打包后的文件部署到express服务器上的方法

    vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发. 1.首先用vue-cli初始化项目目录 vue init webpack pro-name cd pro-name && npm ins

  • SpringBoot中maven项目打成war包部署在liunx服务器上的方法

    说明:Spring Boot由于内嵌了如Tomcat,Jetty和Undertow这样的容器,也就是说可以直接跑起来,用不着再像Spring项目还需要外置的Tomcat等容器来进行部署工作了,通过启动启动类就可以建立独立的Spring应用程序.Spring Boot部署在服务器上主要分为两种方式:一是打成jar包发布,二是打成war包发布,第一种方式只需要在该服务器中运行java -jar+部署项目的名称就可以启动(不要忘了.jar后缀名),操作比较简单,第二种方式操作比较复杂一点,并且是项目发

  • SpringBoot中maven项目打成war包部署在linux服务器上的方法

    SpringBoot中maven项目打成war包部署在linux服务器上的方法

    说明:Spring Boot由于内嵌了如Tomcat,Jetty和Undertow这样的容器,也就是说可以直接跑起来,用不着再像Spring项目还需要外置的Tomcat等容器来进行部署工作了,通过启动启动类就可以建立独立的Spring应用程序.Spring Boot部署在服务器上主要分为两种方式:一是打成jar包发布,二是打成war包发布,第一种方式只需要在该服务器中运行java -jar+部署项目的名称就可以启动(不要忘了.jar后缀名),操作比较简单,第二种方式操作比较复杂一点,并且是项目发

  • Python Web程序部署到Ubuntu服务器上的方法

    Python Web程序部署到Ubuntu服务器上的方法

    在本文记录了我在Ubuntu中部署Flask Web站点的过程, 其中包括用户创建.代码获取.Python3环境的安装.虚拟环境设置.uWSGI启动程序设置,并将Nginx作为前端反向代理.希望对各位有所帮助. 建立一个Python Web程序专用账户 adduser haseo vim /etc/sudoers #将haseo用户加入导sudo用户清单中 sudo usermod -a -G www-data haseo 安装Python3并配置程序运行环境 1.更新Ubuntu的软件库 su

  • .Net Core WebApi部署在Linux服务器上的方法

    鸽了好久,终于有个时间继续写了,继上一篇之后,又写(水)了一篇,有什么不足之处请大家指出,多谢各位了. 下面有两个需要用到的软件,putty和pscp,我已经上传到博客园了,下载请点击这里. 一.准备服务器 首先和之前一样,先去腾讯云整了个云服务器,选择CentOS的镜像. 然后跟之前一样完成购买,得到公网的IP地址. 接着我们复制下来公网的IP地址,我这里使用了putty进行远程登录. 输入root用户名和你之前设置的密码进行登录. 然后,我们就可以安装.Net Core的运行环境了. 二.安

  • vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法

    在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览.根据官网打包出来的html直接打开是显示空白. vue打包后显示空白正确处理方法是 1.找到配置文件 修改 这样打包处理可以打开但是页面样式会找不到 2.修改 找到对应的位置加上publicPath: '../../' 然后就成功了! 很多朋友还遇到这样的问题 vue打包后index文件一片空白,怎么回事呢? vue项目你npm run build打包后,点开index文件打开一片空白, 并报错解决方法:路径问题, 总结 以

  • 如何修改Vue打包后文件的接口地址配置的方法

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的.如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效.那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢? 2.可选方案 进行了调研后,网上介绍的方案有2种: 1)在static上设置一个config.js,把配置的参数设置成 window 下的

  • Vue打包后出现一些map文件的解决方法

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行  cnpm run build  开始打包 2,会在项目目录下自动创建dist目录,打包好的文件都在其中 解决办法:去src/config/index.js中改一个参数: productionSourceMap:false 把这个改为false.不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压

  • 解决vue打包后vendor.js文件过大问题

    第一步.cdn引入各种包 index.html中cdn的方式引入vue.vuex.axios.element-ui.vue-router等包,如下图: 第二步.在使用vue等包的地方,注释掉import引入 在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios).Vue.use(VueRoter).Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中 在main.js

  • vue 打包后找不到dist文件夹的解决方案

    vue 打包后找不到dist文件夹的解决方案

    目录 打包后找不到dist文件夹 运行vue打包后的dist文件夹下的项目 需要安装http-server 通过命令行进入到dist文件夹 打包后找不到dist文件夹 接受一个别人做了一半的项目  , 结果要打包测试的时候  执行npm run build 后 没有dist 文件 看了一下 config文件夹里面的index.js 文件 的build对象, 原来是默认的打包路劲被修改了 , 修改回来就好了, __dirname是获取当前位置的绝对路径 运行vue打包后的dist文件夹下的项目 需

随机推荐