精华内容
下载资源
问答
  • 本篇文章主要介绍了angular2+node.js express打包部署的实战,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • angular2+node.js express打包部署

    千次阅读 2017-04-10 16:28:08
    angular是客户端JS,NODE.JS 是服务端JS,建立SPA 网站需要把这两者统一到一起。...2、使用express命令行工具创建express项目。  express --view=hbs  3、angular2 中 需要引用到第三方库 例如 jquery,boot

    angular是客户端JS,NODE.JS 是服务端JS,建立SPA 网站需要把这两者统一到一起。

    1、angular2项目创建,使用angular-cli

         ng new mypos

    2、使用express命令行工具创建express项目。

          express --view=hbs 

    3、angular2 中 需要引用到第三方库 例如 jquery,bootstrape,

           index.html中需要添加应用,然后文件需要拷贝到assets目录

    <link rel = "stylesheet" type = "text/css" href = "/assets/primeng/resources/themes/bootstrap/theme.css" />
    <link rel = "stylesheet" type = "text/css" href = "/assets/primeng/resources/primeng.min.css" />
    <link rel = "stylesheet" type = "text/css" href = "/assets/primeng/resources/font-awesome.min.css" />
    <script src = "/assets/jquery.min.js" ></script>
    <link type = "text/css" href = "/assets/bootstrap/css/bootstrap.min.css" rel = "stylesheet" >
    <script src = "/assets/bootstrap/js/bootstrap.min.js" ></script>

    4、修改angular-cli.json   //指定为express的静态文件目录。

        

    "outDir" : "express/public/"

    5、打包

           ng build --prod


    6、进入express运行目录

           npm start


    完成!




    展开全文
  • vue 打包后的文件部署express服务器上的方法发布时间:2020-10-26 10:38:50来源:脚本之家阅读:172作者:sindllyvue 简介Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层,...

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

    发布时间:2020-10-26 10:38:50

    来源:脚本之家

    阅读:172

    作者:sindlly

    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服务器上的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!

    展开全文
  • Vue+express+mongodb项目打包部署在云服务器上 笔者所处前提:一台安装了node+mongodb+pm2的云主机。相关安装教程大家可自行网上搜索。 由于笔者买的是腾讯云的学生服务器(centos7),这里就以它为例子。 第一:...

    Vue+express+mongodb项目打包部署在云服务器上

    笔者所处前提:一台安装了node+mongodb+pm2的云主机。相关安装教程大家可自行网上搜索。
    由于笔者买的是腾讯云的学生服务器(centos7),这里就以它为例子。
    第一:配置安全组。
    在这里插入图片描述
    在安全组中新建规则,选择开放端口。
    在这里插入图片描述
    在新规则右侧的管理实例中添加你的云主机。然后修改规则,添加可能用到的端口。
    在这里插入图片描述
    第二:进入你的云主机,检查防火墙设置。
    启动服务:systemctl start firewalld.service
    关闭服务:systemctl stop firewalld.service
    查看所有打开的端口: firewall-cmd --zone=public --list-ports
    添加端口:firewall-cmd --zone=public --add-port=80/tcp --permanent (-- permanent永久生效,没有此参数重启后失效)
    刷新一下防火墙:firewall-cmd --reload
    再次查看所有已打开的端口。
    防火墙的其他操作读者们可自行百度。
    这里将express中listen的端口开放。
    第三:打包部署。
    将除了node_modules的其他项目文件上传至云主机node服务器下新建的一个文件夹中,这个文件夹可以专门用来装你的node项目。这里笔者用的winscp可视化工具直接拖拽上传。
    在这里插入图片描述
    进入项目目录(cd vuemongo),我这里是vuemongo,然后npm install 重新安装node_modules模块,之所以这么做是因为node_modules太大,上传巨慢。
    安装完成后输入 npm run build ,将生成的dist文件夹连同内容一起移入到你搭建http服务器的那个js文件的同级目录中。
    第四:express配置。

    const express=require('express');
    const path = require('path');
    var app=express();
    app.use(express.static(path.join(__dirname, 'dist')));
    app.listen(3000);
    
    

    这里__dirname表示当前文件所在项目下的目录名,所以如果这么写,要把dist文件夹放在跟它同级目录,否则可能会报404。
    第五:pm2 启动这个http服务。
    在这里插入图片描述
    pm2 start index.js
    不出意外的话,应该就可以通过"公网ip:端口号"访问此项目了。
    笔者第一次写博客,如有错误或不足的地方非常欢迎读者们指出。
    这里附上阮一峰大大的linux守护进程教程(里面有pm2的介绍):http://www.ruanyifeng.com/blog/2016/02/linux-daemon.html
    2019年1月7号补充:
    关于静态资源路径和动态资源路径配置问题个人总结:
    举个栗子:静态资源就是指我在npm run serve调试开发时(我这里用的是vue-cli3脚手架,2.x应该是npm run dev吧)的图片css以及fonts字体等放在前端vue工程中用到的资源。动态资源:比如我的项目需要上传图片视频或是其他文件,后台放在磁盘上相应的文件夹中,这个时候得用http的方式获取这些资源,或许你在开发时可以用require(‘相对路径’)获取到服务器端的资源,但是无论怎样最终都是要打包部署的。这时候就得用‘http://ip:监听端口/资源路径’这种形式的url来设置img里面的src或者是video里的src,而不是require,这里列出我的处理方式。
    在这里插入图片描述
    在vue的main.js中设置个全局变量goble,那么在页面中就可以通过this.$Goble获取到这个值。在这里插入图片描述
    我这里的res_url就是src里绑定的值。
    前端处理好后就在后台配置下:
    在这里插入图片描述
    由于我用的express框架,所以如果要让前端能以http的方式获取到图片,这里的app.get就是配置资源路径的。如果不用express框架,用node原生的写法也可以。
    这里附上别人的博客。

    https://www.cnblogs.com/juehai/p/9606511.html
    我也是在网上搜了半天才搜到的,可能是我的搜索方式不对吧。

    2019年1月25日补充
    关于动态资源网络请求url问题:
    需求描述:我的项目中有的动态资源名包含汉语,或者文件夹名有汉语,总之就是最后http这样的网络请求url中有汉语,此时网络请求不通,得通过转码才能访问。这里简单的介绍下面三个方法(js),有兴趣的可以自己去搜:
    escape():主要用于对字符串进行编码,不常用。
    encodeURI():进行url跳转时可以整体使用encodeURI。
    例如: Location.href=encodeURI(“http://cang.baidu.com/do/s?word=百度&ct=21”);
    encodeURIComponent():一般对url后面接的参数编码。
    像这样:?aid=7&u=encodeURIComponent(“汉语”)
    反向编码(解码,js):unescape,decodeURI,decodeURIComponent

    2019年8月7日补充

    nginx代理nodejs加配置https

    早就在腾讯云花了19块整了个一年的域名。一直想弄个https,今天整了一天算是整出来了。
    img
    进入腾讯云的ssl证书专栏你应该能看见这样一个界面(前提是你买了个域名,它好像会配套送一年的证书,我当初好像就是免费送的证书)。
    img
    绑定到你的项目,我这里是默认项目。下面是别人的nginx的安装教程。
    https://blog.csdn.net/WuLex/article/details/90139141
    说一下注意点,wget会把压缩包下载到你当前所在目录下,如果你想下在指定目录,你可以先通过cd 命令进入一个你想放置nginx源文件的目录。还有一点注意点,我上面贴的那个博客上的gcc之类的环境得安啊,我刚开始就是没有安装后来出现一些莫名的错误,整了好久才发现还是得安,如果上面这个链接失效了,读者们也可以自行去百度nginx指定版本的安装,还可以直接用yum安装,这样虽然简单,但是如果不是最新的源,那么你下载的nginx版本也可能不是你参考的配置版本。而且证书文件的解析好像还是需要一些环境的支持。为了防止上面链接失效我这里粘贴一下。

    yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel
    

    一直看到他的第十点结束,后面的反向代理我没参考他的。


    到这里我假定你已经把nginx安装好,nginx.service服务也有,至于需不需要开机自启动,你看着办,反正我没有。然后比较重要的来了,为了保证我们能正常访问到网页,一些端口必须得开,https是443端口,所以你得在安全组中加入443端口,同时如果你还开启了centos7的防火墙服务,就像我最上面所讲的。你防火墙也得开启这个443端口,我就是因为没开启防火墙端口而整了好长时间,一直找不出是什么原因。开启这两个端口后就可以开心的配置nginx.conf文件了,这个是nginx启动的默认配置文件。通过winscp这个软件(腾讯官方推荐的),我们连接到我们的linux云服务器,在里面可以编辑windows文本一样编辑各种文件,对于我们这种不怎么熟悉vim和linux命令的小白来说就是一大福音啊。最开始我们的node服务器的入口文件中设置的端口不是80么,所以就算访问域名可以访问到node服务器返回的html,因为80端口可以不用写,一般网站都是默认的80端口,现在我们把端口改成3000,对应express框架就是app.listen(3000) 然后用winscp编辑这个nginx.conf文件。这里我参考腾讯云官方给出的配置。
    简单介绍下:以#开头的表示注释,跟代码里的//相似。
    主要的配置就两处:

        server{
                listen       80;
                server_name  你的域名;
                rewrite ^(.*)$ https://$host$1 permanent; #把http的域名请求转成https
        }
        server{
               listen 443 ssl;
               server_name 你的域名; #填写绑定证书的域名
               # root /var/www/www.domain.com; #网站主页路径。此路径仅供参考,具体请您按照实际目录操作。
               # index index.html index.htm;   
               ssl_certificate  你的证书名称.crt; #证书文件名称
               ssl_certificate_key 你的私钥.key; #私钥文件名称
               ssl_session_timeout 5m; #下面的这些是些加密优化配置,上面两行最重要
               ssl_ciphers HIGH:!aNULL:!MD5;# ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
               ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
               ssl_prefer_server_ciphers on;
           # location ~ /.ht {
           #     deny  all; #表示在url中拦截所有文件名含有.ht的请求,我这里没开启
           # }
            location / {
                 proxy_pass   http://127.0.0.1:3000;#表示请求转发,和vue代理跨域有些类似
                 # 后面还可以加一些优化配置
            }
        }
    

    其实真正要配置的东西不多,弄懂一些配置之后也没那么难理解,按照我上面给出的配置配置好后,可以重启,或者先关掉nginx再启动nginx服务来让配置生效。这里我以我的实际操作为例:
    /usr/local/nginx/sbin/nginx -t 可以查看你conf文件的配置情况,如果你在某一行忘了加分号,它会报错。
    /usr/local/nginx/sbin/nginx直接输入这个目录下的nginx文件表示启动nginx。当然,如果你配置了nginx服务,也可以通过systemctl start nginx来启动,除了start,你还可以用restart,stop来重启或者关闭nginx服务。
    netstat -ntlp | grep nginx可以查看nginx的启动状态,如果你上面的都没问题的话,这行命令应该会出现两行结果,一个对应80端口,一个则是443端口。
    通过pkill nginx可以干掉我们通过/usr/local/nginx/sbin/nginx启动的进程。
    大致就是这样了,大家遇到问题可以多百度,希望我的文档能给予读者们一定的帮助,最后提醒一遍,安全组和防火墙(如果你启动了防火墙)得开对应的端口,不然你辛辛苦苦配置好,nginx成功运行也没报错,node项目也没bug,能用pm2挂载,但就是无法访问到你的页面!不报错的问题往往才是最让人头疼的。
    最后,我重新配置好了node服务端口为3000,如果我不想外界能通过这个端口访问到我的node项目,同样的,我可以在安全组和防火墙中把这个端口取消掉。

    展开全文
  • Vue项目打包部署express服务器

    千次阅读 2019-12-01 00:05:03
    vue项目打包部署express服务器 Express是基于Node.js平台,快速,开放,极简的Web开发框架,如果前端需要服务器部署自己的项目,可以使用express 首先在vue项目安装 express npm install express -save 然后根...

    Vue项目打包后部署到express服务器

    Express是基于Node.js平台,快速,开放,极简的Web开发框架,如果前端需要服务器部署自己的项目,可以使用express

    首先在vue项目安装 express

    npm install express -save

    然后根目录下新建app.js文件

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

    修改packge.json文件配置

    添加 “start”: “node app.js”

    "scripts": {
      "serve": "vue-cli-service serve --open",
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint",
       "start": "node app.js"
     },
    
    执行 npm run start 运行服务器,打开浏览器输入 localhost:8081 便可以访问到项目

    注意:如果使用vue-router的history模式,需要使用connect-history-api-fallback中间件

    官方解释: 当你使用 history 模式时,URL 就像正常的 url,不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问地址栏中的文件 就会返回 404,这就不好看了。
    所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

    首先安装 connect-history-api-fallback

    npm install --save connect-history-api-fallback

    然后在 APP.js中引入使用
    const express = require('express')
    const path = require('path')
    const app = express()
    
    // vue-router history模式引入connect-history-api-fallback中间件
    const history = require('connect-history-api-fallback')
    
    // 这句代码需要放在express.static上面
    app.use(history())
    
    app.use(express.static(path.join(__dirname, 'dist')))
    
    app.listen(8081, () => {
      console.log('app listening on port 8081')
    })
    
    展开全文
  • vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发,下面通过本文给大家分享vue 打包后的文件部署express服务器上的方法,感兴趣的朋友一起看看吧
  • 一、Express1.Node.js2、ExpressExpress是一个保持最小规模的灵活的Node.js web应用程序开发框架,为web和移动应用程序提供一组强大的功能安装:npm install express --save -g3、express-generator是express项目的...
  • 解决这个问题我们可以参考中间件connect-history-api-fallback ...第一:引入依赖 //引入history代理 解决刷新页面404的问题 var history = require('connect-history-api-...var express = require('express'); var app =
  • 1.这样出来的url会是hash形式的,不好看 2.express使用配置history中间件 要先安装require里面那个东西,cnpm i connect-history-api-fallback --save
  • 解决这个问题可以使用中间件connect-history-api-fallback,官方文档:https://github.com/bripkens/connect-history-api-fallback 第一步:引入资源 var history = require('...var app = express(); app.use(histo
  • vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器。但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包打包后会在项目目录下生成一个...
  • Part.1 安装 express npm install express body-parer --save Part.2 在项目根目录下创建 app.js 文件作为启动 express 服务器代码 app.js 文件内容如下: 1 const express = require('express') 2 const app...
  • 当Vue项目完成后,就需要打包文件,然后部署到服务器上。 Vue打包完成后会在项目的根目录下生成一个dist文件夹,里面存放了所需的文件,将其部署到服务器上并进行相应配置,即可通过浏览器访问。 express框架 1.安装...
  • vue打包部署

    2019-10-22 19:33:15
    1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下(cdm窗口)运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文件会少些 2.安装...
  • nodejs-express项目部署上线

    千次阅读 2020-10-07 15:32:35
    express项目部署上线一、环境配置1.nodejs下载与安装(1)创建目录(2)下载nodejs压缩包(3)解压安装(4)修改配置文件(5)配置成功(6)使用淘宝镜像二、项目部署1.pm2(1)安装(2)基础命令部署 一、环境配置 ...
  • Egg.js线上打包部署

    千次阅读 2019-07-30 00:27:23
    打包Node.js代码的工具有很多,有些工具在打包时将自己写的代码打包为二进制文件配合node_modules一起使用,有些工具将全部代码打包为二进制,个人比较偏向于全部打包,例如pkg,都可以支持express、koa等框架打包,...
  • 21云盒提供了极简单的 Express 部署方法,你可以在21云盒子上通过以Node环境的方式进行部署。 如何部署? 注册成为21云盒子会员 Forkexpress 示例 在21云盒子上创建一个云服务, 并允许21云盒子访问你的代码库...
  • node.js express服务部署到linux 部署之前先在linux安装node环境 //去官网下载node.js linux服务器版本,然后上传到linux相关路径下,一般是/usr/local/,并执行如下命令 //node-xxxx代表我上传的node目录名称 ...
  • vue工程打包部署

    2020-05-25 12:33:52
    1、常见部署方式 vue开发的前端页面属于静态资源,其部署方式各种各样: (1)部署到nodejs所在服务; (2)部署到nginx静态服务器; (3)部署到springboot姿态资源(static)目录下; (4)部署到tomcat目录...
  • 1、vue经过webpack打包之后生成dist文件夹,里面有个index.html,他是前端页面和服务端的对接页面。 2、在express中加入app.use(express.static(path.join(__dirname, 'dist')));app.js 代码如下:const express =...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,576
精华内容 2,230
关键字:

express打包部署