Git Product home page Git Product logo

server's Introduction

server.js

你是不是一直存在个困惑?vue项目build出来的dist文件夹下index.html直接点开始控制台一顿报错。今天咱就给他治服。

解决方案就是本地启动一个node服务。详细步骤如下:

  • 创建项目

     npm init 
  • 安装express

    npm install express
  • 使用 新建一个js,我这命名为server.js

      var express = require("express");
      var app = express();
      // 静态资源代理
      app.use("/", express.static(__dirname + "/dist"));
    
      app.get("/", function (_, res) {
        res.sendFile(__dirname + "/dist/index.html");
      });
    
      var server = app.listen(8088, function () {
        var port = server.address().port;
        console.log('localhost:' + port);
      });
  • 运行 把vue项目中build生成的dist文件夹copy过来。

    node server.js

    打完收工

上面举例的是个没有请求接口的项目,但是我们的项目不请求接口是不可能的。 所以请求接口还是会有问题直接报404。

为啥项目开发运行过程中不会出问题,是因为我们在vue.config.js中配置的 devServer

当项目打包之后,你会发现项目变成静态页面了,我们会把页面打包部署到类似 nginx 上,也就是没有 node.js 作为页面的呈现服务了,那么配置的 devServer 当然也没法有效了,但原理还是一致的,最后只需在 nginx 上配置转发即可。

这是打包后部署服务器上的原理, 那我们部署在本地node服务原理也一样,我们借助http-proxy-middleware来完成代理转发。

  • 安装

    npm install http-proxy-middleware`
  • 使用

    var { createProxyMiddleware } = require("http-proxy-middleware");
    app.use(
       "/api", // 需要代理接口路径
       createProxyMiddleware({
          target: "", // 代理的域名
          changeOrigin: true,
          secure: false,
          onProxyReq: function (proxyReq, req, res, options) {
           if (req.body) {
             let bodyData = JSON.stringify(req.body);
             // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
             proxyReq.setHeader("Content-Type", "application/json");
             proxyReq.setHeader("Content-Length", Buffer.byteLength(bodyData));
             // stream the content
             proxyReq.write(bodyData);
           }
         },
       })
    );
  • 运行

    npm server

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.