開發與發布vue專案

2021-09-28 20:49:38 字數 1892 閱讀 5513

1、安裝vue執行環境

安裝nodejs:

目錄:d:\program files\nodejs

勾選:add to path

安裝完成後

設定快取資料夾

npm config set cache "d:\program files\nodejs\node_cache"
設定全域性模組存放路徑

npm config set prefix "d:\program files\nodejs\node_global"
安裝cnpm

npm

install -g cnpm --registry=

設定環境變數

1、path新增:d:\program files\nodejs\node_global

2、新建系統變數node_path:d:\program files\nodejs\node_modules

關閉命令列重新開啟。

安裝vue

cnpm install vue -g
安裝vue-cli 腳手架

cnpm install vue-cli -g
3、執行已有的專案

已有專案一般不會把node_modules放在svn, git裡面,因為 node_modules 比較大而且它依賴於外層目錄,比如,你把乙個專案移到另外乙個地方同時把 node_modules 移動過去,npm run dev 發現出錯了

此時需要:

刪除專案中node_modules資料夾 ,

執行npm cache clean --force命令清除掉cache快取,

4、npm run dev 與 npm run build 的區別

npm run dev 做了兩件事情:提供 web server + 及時 build 。

首先它會build專案**到當前目錄的dist目錄下,如下

就是上面的訪問位址。

我們還知道,dev模式下,根目錄(/) 指的就是專案目錄,也就是 admin-web 目錄,所以 在 config/index/js 中 dev 應該這麼配置。

然後監聽8080埠,提供 web server 訪問,如果你的**有變動,它會及時build。

npm run build 只做了 build 的工作,你需要將生成的 dist 目錄複製到 web server 根目錄下,比如nginx,因為對於線上環境,vue提供的微型web server是扛不住的,在 build 的時候會根據config/index.js中的 build 模組的設定來打包專案,在此你可以指定nginx的專案根目錄即可。比如,我上面的專案 admin-web 就在nginx根目錄下,我在本地 npm run build 之後,直接將 admin-web 整個提交到svn,然後線上svn up。

我的線上訪問位址為http://ip/admin-web/dist/index.html#/,所以我設定的 build 引數為:

打包發布VUE專案

適用於前後端分離專案,主要是打包前端 核心命令 cnpm install cnpm run build就1個是安裝依賴包,1個是構建專案,最後生成 dist index.html static把這個推到環境就可以了 從我目前的線上經驗上呢 也遇到一些問題的 1.涉及到開發那邊新增了模組,我們這邊打包...

nginx 發布vue專案

打包成功後,複製到伺服器。我的專案目錄是 usr local soft nginx web micro mall h5 2 進入nginx安裝目錄下的 conf nginx.conf檔案修改相關配置 listen配置埠這裡預設是80 修改location內容 當訪問http localhost 80...

vue專案打包發布

打包 1 修改config裡面的index.js裡面的productionsourcemap為false,預設情況是true true代表打包環境是開發環境,可以進行除錯 false表示生產環境,正式上線的 2 找到assetspublicpath 鍵 將它從 變為了 3 在cmd裡面執行npm r...