vue打包之后在本地运行,express搭建服务器,nginx 本地服务器运行

一、使用http-server

  1.安装http-server

    npm install -g http-server 

  2.通过命令进入到dist文件夹

  3.运行http-server

    

   以上在浏览器输入上面地址就可以访问了

二、使用nodejs和express搭建服务器

  使用express可以快速搭建一个完整的网站

  1. 需要先安装nodejs

  2.全局安装express-generator

  npm install express --save -g
  npm install express-generator --save -g

  3. 创建一个 express 项目

    express 项目名字

express express-Test

    进入项目  cd express-Test

    安装依赖  npm i

    启动项目  npm start

  4.打包之后的文件复制到 express-test 中的 public 中

    注意:是打包之后dist里面的文件,不包含 dist 结构,放在express-Test中的public文件夹下面

    

     

   5.启动项目

npm start

    终端出现 node ./bin/www 表示运行成功,

    启动之后浏览器打开localhost:3000就可以访问

   

   6.分析express文件

     1.package.json 文件

    在执行npm start 等价于执行 'node ./bin/www'

    dependencies 中是依赖的包

    在 bin/www 中,首先 var app = require('../app'); 首先加载app.js文件

    

     

    app.js是整个项目的入口文件,加载依赖包,配置中间件,加载路由等,最后在www文件中启动服务

  7.额外操作,在修改js文件的时候,需要重新运行,修改后的js才会生效,可以使用 nodemon 让node.js应用自动重启

    1.全局安装 nodemon

npm install nodemon -g

    2.在项目目录下新建 nodemon.json 文件并添加下面代码   

{
    "restartable": "rs",
    "ignore": [
        ".git",
        ".svn",
        "node_modules/**/node_modules"
    ],
    "verbose": true,
    "execMap": {
        "js": "node --harmony"
    },
    "watch": [

    ],
    "env": {
        "NODE_ENV": "development"
    },
    "ext": "js json njk css js "
}

    3.将 package.json 中的 start 修改为 nodemon ./bin/www

  以上就配置完成 nodemon ,相当于热加载

三、使用 nginx 本地服务器运行

  1.下载nginx

    http://nginx.org/en/download.html

  2.下载之后解压目录如下

    

   3.打开html文件夹,删除里面的所有内容,将打包好的dist文件夹里面的内容,全部复制到html文件夹下面

    

   4.打开conf文件夹,找到 nginx.conf 文件 

    

   5.启动项目

    双击 nginx.exe

  6.浏览器输入访问地址

    localhost:8088

  

原文地址:https://www.cnblogs.com/zhangning187/p/djfwqvue.html