zoukankan      html  css  js  c++  java
  • Vue + ElementUI的电商管理系统实例28 项目上线-通过node创建web服务器

    项目上线

    1、项目上线相关配置

    创建 node 项目,并安装 express,通过 express 快速创建 web 服务器,将 vue 打包生产的 dist 文件夹,托管为静态资源即可,关键代码如下:

    const express = require('express')
    // 创建 web 服务器
    const app = express()
    
    // 托管静态资源
    app.use(express.static('./dist'))
    
    //启动 web 服务器
    app.listen(80, () => {
      console.log('web server running at http://127.0.0.1')
    })

    新建 vue_shop_server 文件夹,用 VScode 打开,然后调用终端,输入:

    npm init -y

    初始化一个包管理配置文件。

    然后安装 express,输入:

    npm i express -S

    安装完成后,把我们前面打包生成的 dist 目录,拷贝到 vue_shop_server 目录下。并新建 app.js 入口文件:

    先导入 express。

    const express = require('express')
    // 创建 web 服务器
    const app = express()
    
    // 托管静态资源
    app.use(express.static('./dist'))
    
    //启动 web 服务器
    app.listen(80, () => {
      console.log('web server running at http://127.0.0.1')
    })

    为了测试服务器能不能正常的运行,可以在终端里输入:

    node app.js

    当终端里可以正常打印出“web server running at http://127.0.0.1”,就证明服务器启动成功了。

    然后打开浏览器,输入 http://127.0.0.1

    发现可以正常访问。

    注意:如果样式有问题的,就把 index.html 文件中的 element-ui 的js文件放在最后面,就可以了。

     

  • 相关阅读:
    漫谈程序员系列:咦,你也在混日子啊
    JVM加载class文件的原理机制
    maven编译的时候排除junit测试类
    mysql之——存储过程 + 游标 + 事务
    JSP页面之${fn:}内置函数
    生成24位字符串ID__IdGenerator.java
    oracle创建用户,表空间,虚拟路径,导入dbf
    eclipse手动修改默认工作空间
    资源
    http协议发送header+body+json及接收解析
  • 原文地址:https://www.cnblogs.com/joe235/p/12652134.html
Copyright © 2011-2022 走看看