精华内容
下载资源
问答
  • 通过node创建web服务器发布vue项目
    2021-08-13 17:30:03

    一、项目上线

    1.新建文件夹vue_shop_server

    2.vs code打开vue_shop_server文件夹

    3.讲vue_shop生成的dist文件夹拷贝到vue_shop_server文件夹中,并在vue_shop_server文件夹中新建app.js,app.js内容如下:

    const express = require('express')
    const app = express()
    
    app.use(express.static('./dist'))
    
    app.listen(8084, () => {
      console.log('server running at http://127.0.0.1');
    })

    二、Gzip传输

    目的:为了缩小请求时文件体积

    1. npm i compression -S

     三、配置https传输(后台人员完成,了解)

    1.配置https服务

    2.使用pm2管理应用(不用每次打开终端窗口node ./app.js启动项目,就可以运行项目)

     

    更多相关内容
  • Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器的基本功能就是提供Web信息浏览服务。它只需支持HTTP协议、HTML文档格式及URL,与客户端的网络浏览器配合。 大多数 web 服务器都...

    使用 Node 创建 Web 服务器

    什么是 Web 服务器?

    Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器的基本功能就是提供Web信息浏览服务。它只需支持HTTP协议、HTML文档格式及URL,与客户端的网络浏览器配合。

    大多数 web 服务器都支持服务端的脚本语言(php、python、ruby)等,并通过脚本语言从数据库获取数据,将结果返回给客户端浏览器。

    目前最主流的三个Web服务器是Apache、Nginx、IIS。

    Node.js 提供了 http 模块,http 模块主要用于搭建 HTTP 服务端和客户端,使用 HTTP 服务器或客户端功能必须调用 http 模块,代码如下:

    var http = require('http');

    在通常的服务器中,数据流通的方式是客户先通过浏览器进行发送请求,服务器在项目中进行查找,然后进客户所需要的页面进行返回,在查找的过程中可能存在两种情况,就是存在和不存在,当然,我们会做出判断,下面就是简单的服务器实现过程:

    1、编写服务器代码server.js

     
    
    1. var http=require('http');

    2. var fs = require('fs');

    3. var url = require('url');

    4. //创建服务器

    5. http.createServer(function(request,response) {

    6. //解析请求,包括文件名

    7. var pathname= url.parse(request.url).pathname;

    8. //输出请求的文件名

    9. console.log("Request for "+ pathname + " received.");

    10. //从文件系统中都去请求的文件内容

    11. fs.readFile(pathname.substr(1),function(err, data) {

    12. if(err) {

    13. console.log(err);

    14. //HTTP 状态码 404 : NOT FOUND

    15. //Content Type:text/plain

    16. response.writeHead(404,{'Content-Type': 'text/html'});

    17. }

    18. else {

    19. //HTTP 状态码 200 : OK

    20. //Content Type:text/plain

    21. response.writeHead(200,{'Content-Type': 'text/html'});

    22. //写会相应内容

    23. response.write(data.toString());

    24. }

    25. //发送响应数据

    26. response.end();

    27. });

    28. }).listen(8081);

    29. console.log('Server running at http://127.0.0.1:8081/');

    通过上面代码,我们就能够实现服务器对于文件的查找,下面,我们就进行创建一个html文件,然后通过浏览器进行访问

    2、编写html文件(index.html),用于浏览器进行请求

     
    
    1. <!DOCTYPE html>

    2. <html lang="en">

    3. <head>

    4. <meta charset="UTF-8">

    5. <title>index</title>

    6. </head>

    7. <body>

    8. 这是一个用于进行nodejs服务器测试的html文件,我们能够通过在浏览器上面输入

    9. http://127.0.0.1:8081/WebServer/index.html进行访问

    10. </body>

    11. </html>

    创建完之后,我们进行测试,现在我的目录结构是这样的:


    3、进行测试

        (1) 首先我们启动服务器,使用命令node WebServer/server.js  
        (2) 在浏览器进行访问,在url栏中输入http://127.0.0.1:8081/WebServer/index.html

        其显示效果如下所示:

    后台效果如下所示:

    当然,我们也能够通过访问通过http://127.0.0.1:8081/LoveYou.html访问server.js文件夹外边的文件,进行到这里,我们就可以得到文件返回给前端,但是有些同学可能会问,样式该怎么做??如下面代码,我们进行了样式的定义,修改了两个div的大小,并且给div设置边框

     
    
    1. <!DOCTYPE html>

    2. <html lang="en">

    3. <head>

    4. <meta charset="UTF-8">

    5. <title>index</title>

    6. <style>

    7. body {

    8. border: 1px solid red;

    9. }

    10. div {

    11. border-radius: 10px;

    12. width: 500px;

    13. height: 200px;

    14. border: 2px solid green;

    15. }

    16. </style>

    17. </head>

    18. <body>

    19. 这是一个用于进行nodejs服务器测试的html文件,我们能够通过在浏览器上面输入

    20. http://127.0.0.1:8081/WebServer/index.html进行访问

    21. <div>1</div>

    22. <div>2</div>

    23. </body>

    24. </html>

    效果如下所示,

    有了这些,我们还会问,你这样直接将样式写在html中,我可不干,我要把样式写道另外单独一个文件中,然后通过引用的方式引入,于是就会有人使用下面代码:

        <link rel="stylesheet" href="http://127.0.0.1:8081/WebServer/index.css">


    然而,这段代码并不会起作用,因为传递给前端的方式 Content-Type是有问题的,需要我们的服务器进行下一步操作,也就是处理静态文件。既然传给前端时需要告诉type是css,那么我们就进行区分对待,如下面代码,我们对server.js进行修改如下:

     
    
    1. var http=require('http');

    2. var fs = require('fs');

    3. var url = require('url');

    4. //创建服务器

    5. http.createServer(function(request,response) {

    6. //解析请求,包括文件名

    7. var pathname= url.parse(request.url).pathname;

    8. //输出请求的文件名

    9. console.log("Request for "+ pathname + " received.");

    10. //当请求static文件夹时,设置文件返回类型是text/css

    11. var firstDir = pathname && pathname.split('/')[2];

    12. var ContentType = null;

    13. if (firstDir && firstDir === 'static') {

    14. ContentType = {'Content-Type': 'text/css'};

    15. } else {

    16. ContentType = {'Content-Type': 'text/html'}

    17. }

    18. //从文件系统中去请求的文件内容

    19. fs.readFile(pathname.substr(1),function(err, data) {

    20. if(err) {

    21. console.log(err);

    22. //HTTP 状态码 404 : NOT FOUND

    23. //Content Type:text/plain

    24. response.writeHead(404, {'Content-Type': 'text/html'});

    25. }

    26. else {

    27. //HTTP 状态码 200 : OK

    28. //Content Type:text/plain

    29. response.writeHead(200, ContentType);

    30. //写会回相应内容

    31. response.write(data.toString());

    32. }

    33. //发送响应数据

    34. response.end();

    35. });

    36. }).listen(8081);

    37. console.log('Server running at http://127.0.0.1:8081/');

    接着,我们需要在项目中创建一个static文件夹,如下面所示结构:

    在static文件夹中创建index.css文件,代码内容如下所示:

     
    
    1. body {

    2. border: 1px solid blue;

    3. }

    4. div {

    5. border-radius: 10px;

    6. width: 400px;

    7. height: 200px;

    8. border: 2px solid yellow;

    9. }

    也就是修改body边框为蓝色,div边框为黄色,同时我们需要更新index.html中文件内容如下所示:

     
    
    1. <!DOCTYPE html>

    2. <html lang="en">

    3. <head>

    4. <meta charset="UTF-8">

    5. <title>index</title>

    6. <link rel="stylesheet" href="http://127.0.0.1:8081/WebServer/static/index.css">

    7. </head>

    8. <body>

    9. 这是一个用于进行nodejs服务器测试的html文件,我们能够通过在浏览器上面输入

    10. http://127.0.0.1:8081/WebServer/index.html进行访问

    11. <div>1</div>

    12. <div>2</div>

    13. </body>

    14. </html>

    也就是通过引入的方式将样式引入到html文件中,然后在浏览器查看内容,效果如下所示:

    很明显,我们的样式已经通过引入的方式引进到html页面中了,同样的原理,我们能够进行将js也通过引入的方式进行使用,在这里我就不一一贴出代码了,看看效果如下所示:

    在上面效果中,当我点击2号div的时候,将会调用我在js文件夹中的方法去执行弹窗,详细代码请到github下载: GitHub - suwu150/node-http-server: 使用http进行搭建自己的文件服务器,通过对服务器文件读取,然后传送给浏览器

    使用 Node 创建 Web 客户端

    Node 创建 Web 客户端需要引入 http 模块,创建 client.js 文件,代码如下所示:

     
    
    1. var http = require('http');

    2. //用于请求的选项

    3. var options = {

    4. host: 'localhost',

    5. port: '8081',

    6. path: '/WebServer/index.html'

    7. };

    8. //处理响应的回调函数

    9. var callback= function(response) {

    10. //不断更新数据

    11. var body = '';

    12. response.on('data',function(data) {

    13. body+=data;

    14. });

    15. response.on('end', function() {

    16. //数据接收完成

    17. console.log(body);

    18. });

    19. };

    20. //向服务器端发送请求

    21. var req = http.request(options, callback);

    22. req.end();

    新打开终端,运行程序如下所示:

    对与服务器,可以参见我以前写过的服务器,其工作原理是一致的: 自己的web服务器项目-request请求和response响应处理(一)_suwu150-CSDN博客  这是使用java进行写的服务器

    业务搭载离不了云服务器,选择合适的平台最重要!

    从目前国内云计算市场的格局来看,国内云计算前三强分别是阿里云、腾讯云和华为云,阿里云、腾讯云作为背靠互联网平台的企业,更偏向于B端用户;华为与作为传统的通信巨头,更偏向于G端。

    本人从事云计算相关工作至今已有多年,国内主流的云平台都接触过,包括他们的销售及技术团队,对各家的产品也小有了解,并且指导过数百家企业迁移上云,对云平台选择也有一定的发言权!

    网上有很多评测,评测数据也五花八门,说谁好的都有,这个两篇博文分析汇总的非常详细,分享给大家,文档地址:

    博文1:云服务器哪家好!阿里云、腾讯云、华为云的服务器配置及价格对比?​

    博文2:阿里云服务器突发型t6、n4、s6、c5、c6怎么选?和腾讯云服务器标准型s3、sn3ne、s4、s5、sa2相比哪家好?全面解析

    如果是高并发,高IO业务场景,需要确定服务器规格,可让业务应用性能发挥到最佳,参考官方文档:

    阿里云服务器规格:规格实例族 - 云服务器 ECS

    腾讯云服务器规格:规格实例族 - 云服务器CVM

    展开全文
  • nodejs构建vueThere are so many ways we can build Vue apps and ship for production. One way is to build the Vue app with NodeJS or Java and another way is to build the Vue.js and serve that static ...

    nodejs构建vue

    There are so many ways we can build Vue apps and ship for production. One way is to build the Vue app with NodeJS or Java and another way is to build the Vue.js and serve that static content with the NGINX web server. With NodeJS we have to deal with the server code as well, for example, you need to load index.html page with node.

    我们可以通过多种方式来构建Vue应用并交付生产。 一种方法是使用NodeJS或Java构建Vue应用程序,另一种方法是构建Vue.js并通过NGINX Web服务器提供该静态内容。 使用NodeJS,我们还必须处理服务器代码,例如,您需要使用node加载index.html页面。

    In this post, we will see the details and implementation with the NodeJS. We will go through step by step with an example.

    在本文中,我们将看到NodeJS的详细信息和实现。 我们将逐步举例。

    • Introduction

      介绍

    • Prerequisites

      先决条件

    • Example Project

      示例项目

    • Just Enough NodeJS For This Project

      足够用于该项目的NodeJS

    • Development Phase

      开发阶段

    • How To Build Project For Production

      如何建立生产项目

    • Summary

      摘要

    • Conclusion

      结论

    介绍 (Introduction)

    Vue.js is a Progressive JavaScript Framework for building web apps and it doesn’t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of Vue application with all the dependencies(CSS and js files) in the browser. In this case, we are using node as the webserver which loads Vue assets and accepts any API calls from the Vue UI app.

    Vue.js是一个用于构建Web应用程序的渐进式JavaScript框架,它不会在浏览器中加载自身。 我们需要某种机制来加载Vue应用程序的index.html (单页)以及浏览器中的所有依赖项(CSS和js文件)。 在这种情况下,我们将节点用作加载Vue资产并接受来自Vue UI应用程序的所有API调用的Web服务器。

    Image for post
    Vue with nodejs Vue与Node.js

    If you look at the above diagram all the web requests without the /api will go to Vue routing and the Vue Router kicks in and loads components based on the path. All the paths that contain /api will be handled by the Node server itself.

    如果您查看上面的图,所有不带/ api的Web请求都将转到Vue路由,Vue路由器将启动并根据路径加载组件。 包含/ api的所有路径都将由节点服务器本身处理。

    In this post, we are going to develop the Vue app with NodeJS and see how to build for production.

    在本文中,我们将使用NodeJS开发Vue应用程序,并了解如何为生产而构建。

    先决条件 (Prerequisites)

    There are some prerequisites for this article. You need to have nodejs installed on your laptop and know-how Http works. If you want to practice and run this on your laptop you need to have these on your machine.

    本文有一些先决条件。 您需要在笔记本电脑上安装nodejs并了解Http的工作原理。 如果要在笔记本电脑上练习并运行此程序,则需要在计算机上安装它们。

    示例项目 (Example Project)

    This is a simple project which demonstrates developing and running Vue application with NodeJS. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.

    这是一个简单的项目,演示了如何使用NodeJS开发和运行Vue应用程序。 我们有一个简单的应用程序,可以在其中添加用户,计数并在侧面显示它们,并在需要时检索它们。

    Image for post
    Example Project 示例项目

    As you add users we are making an API call to the nodejs server to store them and get the same data from the server when we retrieve them. You can see network calls in the following video.

    添加用户时,我们正在对nodejs服务器进行API调用,以存储它们并在检索用户时从服务器获取相同的数据。 您可以在以下视频中看到网络通话。

    Image for post
    API network calls API网络调用

    Here is a Github link to this project. You can clone it and run it on your machine.

    这是该项目的Github链接。 您可以克隆它并在计算机上运行它。

    // clone the project
    git clone https://github.com/bbachi/vuejs-nodejs-example.git// strat the api
    cd api
    npm install
    npm run dev// start the react app
    cd my-app
    npm install
    npm run serve

    就足够这个项目的NodeJS (Just Enough NodeJS For This Project)

    If you are new to NodeJS don’t worry this short description is enough to get you started with this project. If you are already aware of NodeJS, you can skip this section.

    如果您是NodeJS的新手,请不要担心,这段简短的说明足以让您开始使用此项目。 如果您已经知道NodeJS,则可以跳过本节。

    NodeJS is an asynchronous event-driven javascript runtime environment for server-side applications. The current version of the nodejs is 12 and you can install it from this link here. You can click on any LTS link and the NodeJS package is downloaded and you can install it on your laptop.

    NodeJS是用于服务器端应用程序的异步事件驱动的javascript运行时环境。 当前的nodejs版本是12 ,您可以在此链接中安装它 您可以单击任何LTS链接,然后下载NodeJS软件包,然后将其安装在笔记本电脑上。

    You can check the version of the Node with this command node -v. You can run javascript on the node REPL by typing the command node on the CLI.

    您可以使用此命令node -v.检查Node的版本node -v. 您可以通过在CLI上键入命令node在节点REPL上运行javascript。

    Image for post
    Typing commands on REPL 在REPL上键入命令

    The installation of a node is completed and you know how to run javascript. You can even run javascript files. For example, Let’s put the above commands in the sample.js file and run it with this command node sample.js.

    节点的安装已完成,您知道如何运行javascript。 您甚至可以运行javascript文件。 例如,让我们将以上命令放入sample.js文件,并使用此命令node sample.js.运行它node sample.js.

    var x = 10;
    var y = 20;
    var z = x + y;
    console.log(z);

    开发阶段 (Development Phase)

    Usually, the way you develop and the way you build and run in production are completely different. Thatswhy, I would like to define two phases: Development phase and Production phase.

    通常,您的开发方式以及在生产中构建和运行的方式是完全不同的。 因此,我想定义两个阶段:开发阶段和生产阶段。

    In the development phase, we run the nodejs server and the Vue app on completely different ports. It’s easier and faster to develop that way. If you look at the following diagram the Vue app is running on port 8080 with the help of a webpack dev server and the nodejs server is running on port 3080.

    在开发阶段,我们在完全不同的端口上运行nodejs服务器和Vue应用程序 这样开发起来更容易,更快捷。 如果您查看下图,则在Webpack开发服务器的帮助下Vue应用程序在端口8080上运行,而nodejs服务器在端口3080上运行。

    Image for post
    Development Environment 开发环境

    项目结构 (Project Structure)

    Let’s understand the project structure for this project. We will have two package.json: one for the Vue and another for nodejs API. It’s always best practice to have completely different node_modules for each one. In this way, you won’t get merging issues or any other problems regarding web and server node modules collision.

    让我们了解该项目的项目结构。 我们将有两个package.json:一个用于Vue,另一个用于nodejs API。 始终最好的做法是每个节点都有完全不同的node_modules 。 这样,您将不会遇到合并问题或有关Web和服务器节点模块冲突的任何其他问题。

    Image for post
    project structure 项目结构

    If you look at the above project structure, all the React app resides under the my-app folder and nodejs API resides under the api folder. If you put NodeJS API at the root folder instead of in a separate folder you might have issues with the Vue CLI picking up root node_modules.

    如果您查看上述项目结构,则所有React应用程序都位于my-app文件夹下,而nodejs API则位于api文件夹下。 如果将NodeJS API放在根文件夹而不是单独的文件夹中,则Vue CLI拾取根node_modules可能会遇到问题。

    NodeJS API (NodeJS API)

    We use the express and nodemon on the server-side. Express is the Fast, unopinionated, minimalist web framework for NodeJS and nodemon is the library which makes your API reloads automatically whenever there is a change in the files. Let’s install these two dependencies. nodemon is only used for development so install this as a dev dependency.

    我们在服务器端使用express和nodemon。 Express是用于NodeJS的快速,不受限制的,极简的Web框架,而nodemon是可让您的API在文件发生更改时自动重新加载的库。 让我们安装这两个依赖项。 nodemon仅用于开发,因此请将其安装为dev依赖项。

    npm install express --save
    npm install nodemon --save-dev

    Here is the package.json of nodejs API.

    这是nodejs API的package.json

    {
      "name": "api",
      "version": "1.0.0",
      "description": "example project react with nodejs",
      "main": "server.js",
      "scripts": {
        "start": "node server.bundle.js",
        "build": "webpack",
        "dev": "nodemon ./server.js localhost 3080"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/bbachi/vuejs-nginx-docker.git"
      },
      "author": "Bhargav Bachina",
      "license": "ISC",
      "bugs": {
        "url": "https://github.com/bbachi/vuejs-nginx-docker/issues"
      },
      "homepage": "https://github.com/bbachi/vuejs-nginx-docker#readme",
      "dependencies": {
        "express": "^4.17.1",
        "http-proxy-middleware": "^1.0.4"
      },
      "devDependencies": {
        "del": "^5.1.0",
        "fancy-log": "^1.3.3",
        "gulp": "^4.0.2",
        "gulp-zip": "^5.0.1",
        "nodemon": "^2.0.4",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11",
        "webpack-stream": "^5.2.1"
      }
    }

    We need to import express and define two routes: /api/users and /api/user and the server listening on the port 3080. Here is the server.js file. We use body-parser to handle data in the http request object.

    我们需要导入express并定义两个路由: / api / users/ api / user,以及侦听端口3080的服务器这是server.js文件。 我们使用body-parser处理http请求对象中的数据。

    const express = require('express');
    const path = require('path');
    const app = express(),
          bodyParser = require("body-parser");
          port = 3080;
    
    
    // place holder for the data
    const users = [];
    
    
    app.use(bodyParser.json());
    app.use(express.static(path.join(__dirname, '../my-app/build')));
    
    
    app.get('/api/users', (req, res) => {
      console.log('api/users called!')
      res.json(users);
    });
    
    
    app.post('/api/user', (req, res) => {
      const user = req.body.user;
      console.log('Adding user:::::', user);
      users.push(user);
      res.json("user addedd");
    });
    
    
    app.get('/', (req,res) => {
      res.sendFile(path.join(__dirname, '../my-app/build/index.html'));
    });
    
    
    app.listen(port, () => {
        console.log(`Server listening on the port::${port}`);
    });

    You need to start the nodejs API with this command npm run devand the moment you change any file, it will be automatically updated. We are using nodemon to watch files.

    您需要使用此命令npm run dev启动nodejs API,更改任何文件后,该文件将自动更新。 我们正在使用nodemon来监视文件。

    Image for post
    nodemon in action Nodemon在行动

    Vue用户界面 (Vue UI)

    Now the nodejs API is running on port 3080. Now it’s time to look at the Vue UI. The entire Vue app is under the folder my-app. You can create with this command vue create my-appI am not going to put all the files here you can look at the entire files in the above Github link or here.

    现在,nodejs API在端口3080上运行。现在是时候查看Vue UI了。 整个Vue应用程序位于my-app文件夹下。 您可以使用此命令vue create my-app我不会将所有文件放在此处,您可以在上面的Github链接中或此处查看整个文件

    Let’s see some important files here. Here is the service file which calls node API. This is a service file with two async functions that use fetch API to make the API calls.

    让我们在这里看到一些重要的文件。 这是调用节点API的服务文件。 这是一个具有两个异步函数的服务文件,这些函数使用访存API进行API调用。

    export async function getAllUsers() {
    
    
        const response = await fetch('/api/users');
        return await response.json();
    }
    
    
    export async function createUser(data) {
        const response = await fetch(`/api/user`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({user: data})
          })
        return await response.json();
    }

    Here is the Dashboard component that calls this service and gets the data from the API. Once we get the data from the API we set the state accordingly and renders the appropriate components again to pass the data down the component tree. You can find other components here.

    这是调用此服务并从API获取数据的仪表板组件。 从API获取数据后,我们将相应地设置状态,并再次渲染适当的组件以将数据传递到组件树。 您可以在这里找到其他组件。

    <template>
      <div class="hello">
        <Header />
        <div class="container mrgnbtm">
              <div class="row">
                <div class="col-md-8">
                    <CreateUser @createUser="userCreate($event)" />
                </div>
                <div class="col-md-4">
                    <DisplayBoard :numberOfUsers="numberOfUsers" @getAllUsers="getAllUsers()" />
                </div>
              </div>
        </div>
        <div class="row mrgnbtm">
            <Users v-if="users.length > 0" :users="users" />
        </div>
      </div>
    </template>
    
    
    <script>
    import Header from './Header.vue'
    import CreateUser from './CreateUser.vue'
    import DisplayBoard from './DisplayBoard.vue'
    import Users from './Users.vue'
    import { getAllUsers, createUser } from '../services/UserService'
    
    export default {
      name: 'Dashboard',
      components: {
        Header,
        CreateUser,
        DisplayBoard,
        Users
      },
      data() {
          return {
              users: [],
              numberOfUsers: 0
          }
      },
      methods: {
        getAllUsers() {
          getAllUsers().then(response => {
            console.log(response)
            this.users = response
            this.numberOfUsers = this.users.length
          })
        },
        userCreate(data) {
          console.log('data:::', data)
          createUser(data).then(response => {
            console.log(response);
            this.getAllUsers();
          });
        }
      },
      mounted () {
        this.getAllUsers();
      }
    }
    </script>

    Vue UI和Node API之间的交互 (Interaction between Vue UI and Node API)

    In the development phase, the Vue app is running on port 8080 with the help of a Vue CLI and nodejs API running on port 3080.

    在开发阶段,借助于在端口3080上运行的Vue CLI和nodejs API,Vue应用程序将在端口8080上运行。

    There should be some interaction between these two. We can proxy all the API calls to nodejs API. Vue CLI provides some inbuilt functionality and to tell the development server to proxy any unknown requests to your API server in development, we just need to add this file at the root where package.json resides and configures the appropriate API paths.

    两者之间应该有一些互动。 我们可以将所有API调用代理到nodejs API。 Vue CLI提供了一些内置功能,并告诉开发服务器将任何未知请求代理到开发中的API服务器,我们只需要将此文件添加到package.json所在的根目录并配置适当的API路径即可。

    module.exports = {
        devServer: {
          proxy: {
            '^/api': {
              target: 'http://localhost:3080',
              changeOrigin: true
            },
          }
        }
      }

    With this in place, all the calls start with /api will be redirected to http://localhost:3080 where the nodejs API running.

    有了这个,所有以/ api开头的调用将被重定向到http:// localhost:3080 运行nodejs API的位置。

    Once this is configured, you can run the Vue app on port 8080 and nodejs API on 3080 still make them work together.

    配置完成后,您可以在端口8080上运行Vue应用程序,而在3080上的nodejs API仍然可以使它们协同工作。

    // nodejs API (Terminal 1)cd api (change it to API directory)
    npm run dev// React app (Terminal 2)cd my-app (change it to app directory)
    npm run serve

    如何建立生产项目 (How To Build Project For Production)

    The Vue app runs on the port 3000 with the help of a Vue CLI. This is not the case for running in production. We have to build the Vue project and load those static assets with the node server. Let’s see those step by step here.

    Vue应用程序借助Vue CLI在端口3000上运行。 在生产中运行不是这种情况。 我们必须构建Vue项目,并将这些静态资产加载到节点服务器。 让我们逐步了解这些内容。

    First, we need to build the Vue project with this command npm run build or vue-cli-service buildand all the built assets will be put under the dist folder.

    首先,我们需要使用此命令npm run buildvue-cli-service build来构建Vue项目,所有构建的资产都将放在dist文件夹下。

    Image for post
    npm run build npm运行构建

    Second, we need to make some changes on the server-side. Here is the modified server.js file.

    其次,我们需要在服务器端进行一些更改。 这是修改后的server.js文件。

    1. We need to import path that resolves . and .., and uses the appropriate file separator for any platform

      我们需要导入解决的路径 ... ,并为任何平台使用适当的文件分隔符

    2. We have to use express.static at line number 11 to let express know there are a dist folder and assets of the Vue build.

      我们必须在第11行使用express.static来使express知道Vue构建中有一个dist文件夹和资产。

    3. Load index.html for the default route / at line number 26

      加载index.html作为默认路由/在第26

    const express = require('express');
    const path = require('path');
    const randomId = require('random-id');
    const app = express(),
          bodyParser = require("body-parser");
          port = 3080;
    
    
    // place holder for the data
    const users = [];
    
    
    app.use(bodyParser.json());
    app.use(express.static(path.join(__dirname, '../my-app/dist')));
    
    
    app.get('/api/users', (req, res) => {
      console.log('api/users called!!!!!!!')
      res.json(users);
    });
    
    
    app.post('/api/user', (req, res) => {
      const user = req.body.user;
      user.id = randomId(10);
      console.log('Adding user:::::', user);
      users.push(user);
      res.json("user addedd");
    });
    
    
    app.get('/', (req,res) => {
      res.sendFile(path.join(__dirname, '../my-app/build/index.html'));
    });
    
    
    app.listen(port, () => {
        console.log(`Server listening on the port::${port}`);
    });

    Once you are done with the above changes, you can actually run the whole app with the nodejs server running on port 3080 like below as nodejs acts as a web server as well. At this time you don’t need to run Vue CLI on port 8080. Every time you change anything on the Vue side you need to build the project again to reflect the changes.

    完成上述更改后,您实际上可以使用运行在端口3080上的nodejs服务器运行整个应用程序,如下所示,因为nodejs也可以充当Web服务器。 目前,您不需要在端口8080上运行Vue CLI 每次在Vue端进行任何更改时,都需要再次构建项目以反映所做的更改。

    Image for post
    running the whole app on port 3080 在端口3080上运行整个应用程序

    摘要 (Summary)

    • There are so many ways we can build Vue apps and ship for production.

      我们可以通过多种方式来构建Vue应用并交付生产。
    • One way is to build the Vue app with NodeJS.

      一种方法是使用NodeJS构建Vue应用。
    • In the development phase, we can run Vue UI and Nodejs on separate ports.

      在开发阶段,我们可以在单独的端口上运行Vue UI和Nodejs。
    • The interaction between these two happens with proxying all the calls to API.

      这两者之间的交互是通过代理所有对API的调用而发生的。
    • In the production phase, you can build the Vue app and put all the assets in the build folder and load it with the node server.

      在生产阶段,您可以构建Vue应用并将所有资产放置在build文件夹中,然后将其与节点服务器一起加载。
    • Nodejs act as a web server as well in the above case. You need to let express know where are all the Vue build assets are.

      在上述情况下,Node.js也充当Web服务器。 您需要让express知道所有Vue构建资产在哪里。
    • We can package the application in a number of ways.

      我们可以通过多种方式打包应用程序。
    • You can deploy the packaged zip folder in any node environment.

      您可以在任何节点环境中部署打包的zip文件夹。

    结论 (Conclusion)

    This is one way of building and shipping Vue apps. This is really useful when you want to do server-side rendering or you need to do some processing. NodeJS is non-blocking IO and it is very good for normal websites as well. In future posts, I will discuss more on deploying strategies for this kind of architecture.

    这是构建和交付Vue应用程序的一种方法。 当您要执行服务器端渲染或需要进行一些处理时,这非常有用。 NodeJS是非阻塞IO,对于普通网站也非常有用。 在以后的文章中,我将讨论有关这种架构的部署策略的更多信息。

    翻译自: https://medium.com/bb-tutorials-and-thoughts/how-to-develop-and-build-vue-js-app-with-nodejs-bd86feec1a20

    nodejs构建vue

    展开全文
  • ws:是nodejs的一个WebSocket库,可以用来创建服务。 https://github.com/websockets/ws 3.server.js 在项目里面新建一个server.js,创建服务,指定8181端口,将收到的消息log出来。 var WebSocketServer = ...
  • nodejs-websocket 基于node创建websocket服务器 websocket 协议和 http 协议类似,http 协议有一个缺陷,只能由客户方端发起请求,服务端根据请求 url 和传过去的参数返回对应结果 websocket 是双向通信的,只要 ...
  • nodejs+express搭建服务器发布vue项目

    千次阅读 2019-08-08 01:26:27
    一、nodejs+express搭建服务器 1.Express介绍:express 是一个简洁而灵活的 node.js Web应用框架, 可以帮助你创建各种 Web 应用,和丰富的 HTTP 工具。这里使用Express 可以快速地搭建一个完整功能的网站。 2.使用...

    一、nodejs+express搭建服务器 

    1.Express介绍:express 是一个简洁而灵活的 node.js Web应用框架, 可以帮助你创建各种 Web 应用,和丰富的 HTTP 工具。这里使用Express 可以快速地搭建一个完整功能的网站。

    2.使用Express的前提:需先安装nodejs,可以到node.js官网上下载安装,教程可以百度,一步一步跟着教程就可以了。

    3.全局安装express 和 express-generator

        npm install express --save -g

        npm install express-generator --save -g 

        查看nodejs安装目录

    express-generator是express应用生成器,相当于express 的骨架,进入一个web项目中后,使用express xxx (项目名称)命令,能快速构建 xxx (项目名称)这个应用的目录结构。

    4.创建一个express项目

     打开项目:cd expressDemo

    安装:npm install

    启动项目:npm start

    浏览器输入:localhost:3000(可以在bin/www文件中修改端口号),访问成功说明node Express服务器搭建成功。

        var port = normalizePort(process.env.PORT || '3000');

    查看express项目

    二、node Express 部署vue项目

    1.新建一个vue项目:hanyin 

    在终端执行命令:vue init webpack hanyin,cd 将入 hanyin 项目中,执行命令 npm run dev ,浏览器访问:localhost:8080

     

    2.vue 项目npm run build 进行打包部署,项目中会多出一个dist文件

    3.将dist文件复制到创建好的node express服务器项目中的expressDemo/public目录下,浏览器访问localhost:3000/dist,显示vue项目界面就说明node服务器部署vue项目成功(vue项目已初始化过)

    辅助链接:

    https://blog.csdn.net/github_38057462/article/details/84871789

    https://www.cnblogs.com/wgl0126/p/9290157.html

     

     

     

     

    展开全文
  • 一、Express1.Node.js2、ExpressExpress是一个保持最小规模的灵活的Node.js web应用程序开发框架,为web和移动应用程序提供一组强大的功能安装:npm install express --save -g3、express-generator是express项目的...
  • 整一个个人网站服务器的准备华为云服务器,阿里腾讯云服务器流程大致相同远程连接服务器测试项目运行环境搭建项目部署node服务部署vue服务部署总结 服务器的准备 华为云服务器,阿里腾讯云服务器流程大致相同 部署...
  • 本文主要介绍vue+webpack打包部署到nginx服务器。node.js+npm+vue+webpack+nginx前端项目打包部署到服务器 vue/express+node.js+mongodb 因为可以需要依赖node.js,所有需要先安装node.js,步骤如下: 一、环境准备...
  • nodejs构建vueIn the previous parts of the series, we looked at how to create the User Interface of our Invoicing Application that allowed users to create and view existing invoices. In this final part...
  • vscode初始化设置 1.自定义配置 2.怎么设置和使用vue模板 https://www.cnblogs.com/pwindy/p/12920050.html
  • 注:服务器为CentOS 7.3.1611,使用Xshell6 + Xftp6工具完成服务器远程操作 一、安装Node环境 通过Xshell连接服务器成功之后就可以开始以下工作 1.清理工作 如果之前有安装过nodejs,用自带的包管理命名先删除一...
  • 通过node创建web服务器 新建文件夹 vue_shop_server,VS Code打开文件夹 npm init -y 初始化包管理文件 npm install express -S 安装Express 将vue_shop文件夹中的dist目录复制到vue_shop_server中 在vue_shop_...
  • Linux CentOS + Nodejs + Koa部署vue项目

    千次阅读 2019-10-09 20:41:34
    注:以下所有服务器的操作都是使用Xshell6 + Xftp6工具操作 一、安装Node环境 通过Xshell连接服务器成功之后就可以开始以下工作 1.清理工作 如果之前有安装过nodejs,用自带的包管理命名先删除一次 yum remove ...
  • 什么是 node详解浏览器、nodejs和其他服务器之间的关系2.node.js特点:2.1 单线程2.2 非阻塞 I/O(异步)2.3 事件驱动二、NodeJs安装1.引入库2.读入数据总结 前言 提示:Node.js 是一个开源与跨平台的JavaScript...
  • nodejs构建vueIn the first part of this series, we looked at how to set up the backend server for the mini invoicing application. In this part, let’s take a look at how to build the part of the ...
  • 1.云服务器(阿里云,腾讯云都行) 2.域名 (没有就用服务器公网ip访问) 3.已经打包好的前端项目 4.nodejs项目 5.mysql和nodejs在本地已经调通 接下来开始 第一步给服务器做系统,这里我选择的是centors 8.2 2. ...
  • 1、Nodejs+WebSocket创建后台服务器功能 2、Vue视图层,接收后台数据并渲染页面 3、LocalStorage存储会话ID等用户信息 vue + webpack 生成vue项目 脚手架搭建项目也是非常好用,简单命令即可搞定 vue init webpack ...
  • 3、配置代理服务器。 jsonp不是很灵活,只能发送get请求,不能发送psot请求,而cors虽然可以支持多种请求格式,但是如果请求携带cookie的话,还需要服务端和客户端分别配置一下,个人感觉也很麻烦。 ...
  • Vue Web组件演示 丹尼斯·汉堡,Poort80阿姆斯特丹,2018年9月 这是一个使用VueJS的vue-cli v3.x从Vue组件构建W3C Web组件的小演示。 然后,可以将具有定制HTML...运行本地VueJS开发Web服务器 在此演示中,我们将重点放
  • 一般是前端先制作静态页面,同时服务器端创建数据库,搭建服务器端框架,写接口;当接口写完之后,前端或者后端才能嵌套页面。但是如果前端页面制作好了,后端接口还没有写好呢?或者如何让前端、后端各自做各自的...
  • nodejsVue和Idea

    2019-12-24 14:34:28
    文章目录Vue环境搭建Idea安装Idea中配置Vue环境Node.js介绍npm介绍Vue.js介绍[^3]Idea介绍 Vue环境搭建 概述:vue环境搭建:需要npm(cnpm),而npm内嵌于Node.js,所以需要下载Node.js。 下载Node.js:Node.js...
  • nodejs+es6+vue脚手架

    2020-06-01 14:29:33
    第1章 NodeJS 1 学习目标: 掌握Node.js基本使用方法,理解模块化编程 掌握包资源管理器NPM的使用 说出webpack的作用 掌握ES6常用的新特性语法 vue-cli 脚手架 Element-UI 组件库 2 Node.js 2.1 什么是Node.js ...
  • nodejs搭建代理服务器步骤

    千次阅读 2019-03-07 07:42:33
    3、配置代理服务器。 jsonp不是很灵活,只能发送get请求,不能发送psot请求,而cors虽然可以支持多种请求格式,但是如果请求携带cookie的话,还需要服务端和客户端分别配置一下,个人感觉也很麻烦。 相对于前两...
  • nodejsvue的那些事

    万次阅读 2018-04-20 01:15:41
    1.旨在提供一种简单的构建可伸缩网络程序的方法官方网站:http://nodejs.cn/api/Node.js 是一个基于Chromev8 JavaScript 运行时建立的一个平台, 用来方便地搭建快速的, 易于扩展的网络应用· Node.js 借助事件驱动...
  • Vue SPA + Nodejs项目实战

    万次阅读 2017-06-23 10:33:41
    Vue SPA + Nodejs项目实战文章链接:http://blog.csdn.net/i348018533/article/details/73605176本文主要阐述的是使用了vue spa单页应用的后台管理系统配合nodejs接口代理,并使用webpack打包编译的项目架构分享。...
  • vue nodejs 构建There are so many ways we can build Vue.js apps and ship for production. One way is to create the Vue app with NodeJS or Java, and another way is to develop and serve that static ...
  • 由于是第一次在windowsOS的环境下部署web。将所有步骤进行记录。 远程进入服务器 win+r输入mstsc。输入用户名密码。进入服务器。我使用的是公司超融合服务器中其中一个跳板机,属于空闲服务器。将项目直接打包好拖到...
  • nodeJs+vue前端技术临摹

    万次阅读 2018-03-29 22:36:19
    2.服务端NodeJs+Vue结合 选择-----近几年前端技术的发展迅猛,所以我选择后者,也是自我学习的工程 开始动手吧。。。 1.安装开发环境: a:搭建本地nodeJs服务,下载路径:http://nodejs.cn/download/ 安装可...
  • 浅谈为什么vue前端项目要使用nodejs

    千次阅读 2021-05-09 06:07:43
    Vue.js开发有第三方支持的项目构建工具,vue-cli脚手架 通过上面的分析,与其说是VUE需要借助NODE开发前端项目,不如换个思路,在NODE中集成VUE开发前端项目,所以,先安装Node,使用Node的npm先安装Vue,然后再安装...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,365
精华内容 2,546
关键字:

nodejs搭建web服务器vue