Vue環境安裝與項目部署

一、安裝nodejs環境

1.官網下載nodejs：https://nodejs.org/zh-cn/download/

 

 

 

2.下載完成，安裝node。安裝完成后，cmd命令行查看node是否安裝成功

 

 

 

3.在node的安裝目錄下新建兩個文件夾：

node_global                       node_cache

 

 

 

4.建好兩個空文件夾之后，打開cmd命令行，輸入：

npm config set prefix "D:\Develop\nodejs\node_global"

npm config set cache "D:\Develop\nodejs\node_cache"

 

5.配置環境變量

 

 

 

 

6.配置完成后，可以安裝express模塊進行測試

 

 

express安裝完成后

 

 

如果沒有報錯，node基本算是安裝成功了

 

 

 

 

二、安裝Vue-CLI(腳手架工具)

 

1、 安裝NodeJS環境

 

2、 DOS執行 npm install -g vue-cli（如果路徑出錯就執行cnpm install -g vue-cli）

 

3、 cd到vue的項目文件夾下

 

4、 執行vue init webpack vue-playlist

 

5、 切換到vue-playlist目錄下，執行npm run dev，就可啟動該項目

 

6、 安裝路由模塊：npm install vue-router --save-dev

安裝vue-resource：npm install vue-resource --save-dev

 

 

三、Vue項目的部署

 

1、npm run build

　　項目目錄下執行npm run build，會在項目目錄下生成dist文件夾

2、Node上啟動Vue項目

　　在服務器上創建項目目錄，例如example，將第一步中dist文件夾下的所有內容移入，並創建index.js。index.js大致內容如下：

const Express = require("express")
const App = Express()
const path = require("path")

App.use("/ReadingOcean/wechat/scripts", Express.static("scripts"))
App.use("/ReadingOcean/wechat/static", Express.static("static"))

App.get("/", (req, res) => {
  res.redirect("/example")
})

/*
*項目配置，省略，配置文件的example對應真實項目路徑
*/

App.get("/example", (req, res) => {
  res.sendFile(path.resolve(__dirname, "./login.html"))
})



App.use((req, res) => {
  res.sendFile(path.resolve(__dirname, "./home.html"))
})

App.listen(8081)

 

　　進入命令提示符，切換到example目錄下，執行pm2 start index.js，可執行pm2 list查看啟動的應用。

 

 

 

pm2的一些命令：

npm install -g pm2　　　　　　安裝pm2

pm2 start index.js　　　　　　啟動index.js

pm2 list　　　　　　　　　　　　查看啟動的應用

pm2 show index　　　　　　　　查看詳細信息

pm2 logs　　　　　　　　　　　　查看當前信息

pm2 stop index　　　　　　　　停止index

pm2 delete index 　　　　　　　刪除index