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