zoukankan      html  css  js  c++  java
  • 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

      

  • 相关阅读:
    陶瓷电容的结构、工艺、失效模式
    Vue.js最佳实践
    Vue 超快速学习
    CSS 小技巧
    HTML5 Canvas
    webkit下面的CSS设置滚动条
    Some untracked working tree files would be overwritten by checkout. Please move or remove them before you can checkout. View them
    JSCS: Please specify path to 'JSCS' package
    React中ref的使用方法
    React 60S倒计时
  • 原文地址:https://www.cnblogs.com/zhangning187/p/djfwqvue.html
Copyright © 2011-2022 走看看