1、搭建環境--由于本人安裝的是寶塔主機，因此如下：

由于我直接使用的是寶塔主機,直接去“軟件管理”安裝 PM2管理器。 安裝好以后點擊“設置”，找到“模塊管理”，直接安裝需要的模板，我使用的是nuxt，因此我也直接安裝了 nuxt。 (這里安裝有沒有用我目前不太清楚，我只是知道我項目里使用了nuxt，所有我就順便安裝了，時間太忙也就沒深入研究了)

2、添加站點

站點添加成功后修改站點配置文件，直接在配置文件頂部增加 upstream nodenuxt {server 127.0.0.1:3003; #nuxt項目 監聽端口keepalive 64; } //以下為之前默認的數據，不用管 server {listen 80;server_name mysite.com;location / {proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";proxy_set_header Host $host;proxy_set_header X-Nginx-Proxy true;proxy_cache_bypass $http_upgrade;proxy_pass http://nodenuxt; #反向代理} }

3、設置反向代理

由于以上配置了 127.0.0.1:3003 因此反向代理的目標URL也為 http://127.0.0.1:3003 發送域名：mysite.com //項目的訪問域名

4、本地項目下的package.json里設置,?注意：start 使用了3003端

"scripts": {"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server","online": "cross-env NODE_ENV=production nuxt start","build": "nuxt build","start": "PORT=3003 nuxt start","generate": "nuxt generate","lint": "eslint --ext .js,.vue --ignore-path .gitignore .","precommit": "npm run lint"},

5、項目本地完成后， npm run build 打包應用

打包完成后將以下四個文件上傳到服務器空間 .nuxt //打包生成的文件夾 static //默認靜態文件 nuxt.config.js //nuxt項目配置文件 package.json //配置文件

6、在服務器上部署運行

1. 使用命令模式：終端或者其他方式鏈接上服務器 2. 自己先測試一下服務器上是否安裝支node npm,檢查一下版本號 node -vnpm -v 2. 進入到該項目的根目錄 3. 運行 npm install 安裝package里的依賴 4. 安裝好3以后，再運行 npm start 就可以運行起來nuxt的服務渲染了如下： > my-nuxt@1.0.0 start /www/wwwroot/mysite.com > PORT=3003 nuxt start到了這里我們就可以在瀏覽器上輸入 mysite.com 訪問了。服務端渲染瞬間出來了。 #### 別得意，這里還沒完成呢。 ，上面的效果是并不理想的，所以我們需要開啟進程守護來穩定常駐后臺

7、pm2 開啟進程守護

pm2 start npm --name "my-nuxt" -- run start //my-nuxt為我們自定義的項目名稱，也是我們自定義的守護進程名稱┌──────────┬────┬─────────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────┬──────────┐ │ App name │ id │ version │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │ ├──────────┼────┼─────────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────┼──────────┤ │ my-nuxt │ 0 │ 0.33.4 │ fork │ 23278 │ online │ 0 │ 0s │ 0% │ 15.6 MB │ root │ disabled │ └──────────┴────┴─────────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────┴──────────┘出現了以上的圖案數據，說明守護進程已經開啟了。

OK，到了這里也就完成了，你可以放心的訪問你的域名。 就可以正常的訪問啦。

?

第一步：NPM安裝配置

vue可以直接下載.js文件引入項目文件中，也可以使用npm命令來安裝。我們選擇后者進行折騰。

先登錄寶塔管理界面，點擊右側“軟件商店”；

找到PM2，安裝。如有分布式數據庫，則安裝：MongoDB

第二點：安裝cnpm

因速度問題，我們使用npm的淘寶鏡像cnpm來安裝。

先安裝cnpm；

# npm install -g cnpm --registry=https://registry.npm.taobao.org

第三步：安裝VUE

再使用cnpm來安裝vue.js；速度非常快，幾秒時間即可。

# cnpm install vue

第四步：安裝vue-cli，稱為vue腳手架

cnpm install --global vue-cli

vue-cli這個構建工具降低了webpack的使用難度，相當于啟動了一個請求服務器，給你搭建了一個測試環境。

第五步：安裝完成后，再創建一個基于 webpack 模板的新項目，進行配置項目信息

vue init webpack vuedemo

創建過程中，會確認 project name等信息，并輸入author；

一些確認直接回車即可；

第六步：創建完成后，進入項目目錄vuedemo，安裝依賴文件；

cnpm install?

運行即可；因用錯命令，使用了npm，安裝有些慢，直接停止使用cnpm安裝，速度超快；

第七步：運行程序

cnpm run dev

出現Listening at http://localhost:8080表示運行成功；

當前是localhost，我們修改為ip方式；

在項目目錄?下有一個package.json，編輯即可。

直接使用寶塔面板進行編輯修改；

直接找到config下的index.js進行修改，換成當前公網ip，保存即可。

再去目錄下cnpm run dev執行；

?

更多文章參考：https://www.webpackjs.com/concepts/dependency-graph/

https://blog.csdn.net/solar_lan/article/details/82751165

http://www.cainiaoxueyuan.com/tag/webpack/

https://jingyan.baidu.com/article/19020a0a574fbc529d2842ef.html

https://segmentfault.com/a/1190000018930898?utm_source=tag-newest

總結

以上是生活随笔為你收集整理的在宝塔环境下安装VUE 及webpack的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。