我的个人网站:https://m.theeye.tech/

前端交流群:1056993061

首先将vue项目通过命令npm run build 打包,然后创建start.js,代码如下:

  

// const userApi = require('./api');
  const fs = require('fs');
  const path = require('path');
  const bodyParser = require('body-parser');
  const express = require('express');
  const app = express();   app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));
  // 服务开启后访问指定编译好的dist文件下的数据
  app.use(express.static(path.resolve(__dirname, '../dist')))
  app.get('*', function(req, res) {
  const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')
    res.send(html)
  })
  // 后端api路由
  // app.use('/api', userApi);
  // 监听端口
  app.listen();
  console.log('success listen at port:8081......');
 
具体目录如下:

使用命令node start.js,项目就能运行起来了,但是还未配置相关数据库。

当然,vue项目也可以单独启动,输入npm run dev即可。

vue项目如何在node启动的更多相关文章

  1. Vue项目环境搭建(node+webpack)

    安装node.js 下载地址:https://nodejs.org/en/download/ node -v //查看node.js版本 项目环境配置: 安装vue-cli:npm install - ...

  2. Vue项目一、node.js和npm的安装和环境搭建

    一.为什么安装node.js及npm npm npm是Node.js的包管理工具(package manager),是全球最大的生态系统,同过npm可以找到很多丰富的插件来满足项目的需求. a1.现在 ...

  3. vue项目的安装与启动

      第一步:安装Node 检测Node是否安装成功 node -v 第二步:安装vue-cli     命令:npm install vue-cli -g 第三步:搭建项目命令 vue init we ...

  4. 从零构建vue项目(一)--搭建node环境,拉取项目模板

    本文是基于vuecli2搭建的项目. 1. 下载安装nodejs     地址:https://nodejs.org/en/download/ 选择安装版windows .msi, 不要选择压缩版 下 ...

  5. vue项目搭建及创建、目录结构、项目启动、全局配置

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  6. Vue框架(三)——Vue项目搭建和项目目录介绍、组件、路由

    Vue项目环境搭建 1) 安装node,在官网下载好,然后在本地安装 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm ins ...

  7. 如何创建vue项目

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  8. vue项目配置及项目初识

    目录 Vue项目环境搭建 Vue项目创建 重构项目依赖 1.需要转移的文件 2.重构依赖 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main. ...

  9. Vue 项目开发

    目录 Vue 项目开发 项目目录结构解析 入口文件 main.js (项目入口) 根组件 app.vue index.html 文件入口 router 路由 components 子组件 项目初始化 ...

随机推荐

  1. 制作你的第一个dockerfile文件

    From this lesson you will从这里你将学到1,Make a Dockerfile制作一个Dockerfile2,Build a Docker Image and run构建镜像并 ...

  2. 移动端适配(手机端rem布局详解)

    1. 问题的引出 如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10 ...

  3. java架构之路-(SpringMVC篇)SpringMVC主要流程源码解析(下)注解配置,统一错误处理和拦截器

    我们上次大致说完了执行流程,也只是说了大致的过程,还有中间会出错的情况我们来处理一下. 统一异常处理 比如我们的运行时异常的500错误.我们来自定义一个类 package com.springmvcb ...

  4. 自适应布局display:-webkit-box的用法

    在web布局中,我们经常使用的是display:inline-block,display:flex,这些,但其实在进行移动端设备自适应布局中,-webkit-box布局更加合适 不同的浏览器有不同的前 ...

  5. salt-api 配置使用

    salt-api 安装  配置源 (系统环境s示例是centos6) epel 源 rpm -Uvh https://mirrors.tuna.tsinghua.edu.cn/epel/6/i386/ ...

  6. 初探内核之《Linux内核设计与实现》笔记下

    定时器和时间管理 系统中有很多与时间相关的程序(比如定期执行的任务,某一时间执行的任务,推迟一段时间执行的任务),因此,时间的管理对于linux来说非常重要. 主要内容: 系统时间 定时器 定时器相关 ...

  7. Spring Boot2 系列教程(十一)Spring Boot 中的静态资源配置

    当我们使用 SpringMVC 框架时,静态资源会被拦截,需要添加额外配置,之前老有小伙伴在微信上问松哥 Spring Boot 中的静态资源加载问题:"松哥,我的 HTML 页面好像没有样 ...

  8. SpringCloud系列-整合Hystrix的两种方式

    Hystrix [hɪst'rɪks],中文含义是豪猪,因其背上长满棘刺,从而拥有了自我保护的能力.本文所说的Hystrix是Netflix开源的一款容错框架,同样具有自我保护能力. 本文目录 一.H ...

  9. 配置code::blocks的glut环境

    code::blocks很小,特别适合小型项目及家用旧电脑上MingW下编程,当然windows还是安装的Visual Studio办公用的,现把配置过程记录一遍. 1.在百度搜code::block ...

  10. HTTP中get和post

    HTTP中get和post的区别 GET - 从指定的资源请求数据. POST - 向指定的资源提交要被处理的数据 GET POST 后退/刷新 无害的 数据会被重新提交 书签 可收藏为书签 不可收藏 ...