Vue项目部署,打包发布上线
參考vuecli官方文檔
一、構建打包
在發布上線之前,我們需要執行構建打包,將 .less、.vue、.js 等相關資源進行編譯打包,轉換成瀏覽器可以直接識別運行的普通 css、js、html。
# yarn run build 或者 yarn build npm run build
VueCLI 會把打包結果生成存儲到項目的 dist 目錄中。
正確的話應該會得到這樣一個打包結果:
二、本地預覽測試打包結果
注意:不能直接雙擊打開 index.html 運行。
將 dist 放到一個 Web 服務器中運行測試,常見的 Web 服務器:
Ngxin
Apache
tomcat
IIS
。。。。
Node.js
前端安裝配置上面的服務器軟件麻煩,這里推薦使用 Vue 官方推薦的一個命令行 http 服務工具:serve。
dist 目錄需要啟動一個 HTTP 服務器來訪問 (除非你已經將 publicPath 配置為了一個相對的值),所以以 file:// 協議直接打開 dist/index.html 是不會工作的。在本地預覽生產環境構建最簡單的方式就是使用一個 Node.js 靜態文件服務器,例如 serve:
安裝:
# yarn global add serve # 注意:這是在安裝全局包,在任何目錄執行都可以 # 安裝一次就可以了,以后不需要重復安裝,頂多升級重裝 npm install -g serve然后在你的項目目錄下執行:
# dist 是運行 Web 服務根目錄 serve -s dist如果啟動成功,你將看到如下提示:
serve 默認占用 5000 端口并啟動一個服務
然后在瀏覽器中訪問給出的地址訪問測試。
你自己先大概的測試一下,確保打包結果可以正常運行,然后交由專業的測試人員進行測試。
如果測試出問題怎么辦?
修改 src 源代碼
重新構建打包
注意:
不要去修改 dist 中的文件代碼,沒有用。
因為每次 npm run build 都會先把原來的 dist 刪除,然后生成新的結果。
三、部署
公司有專門的 devops,說白了就是運維
有些公司沒有專門的運維人員,那就后端負責
你只需要把打包結果給人家就可以了
如果想要自己部署,怎么辦?
買一個服務器
安裝服務器運行環境
阿里云、騰訊云、…
買個域名(非必須)
第一次買非常便宜,幾十塊錢,續費非常貴
把項目代碼推送到你的部署服務端
四、21云盒子
21云盒子技術文檔
總結
以上是生活随笔為你收集整理的Vue项目部署,打包发布上线的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 论文阅读 - Jukebox: A Ge
- 下一篇: 一、Vue基础语法学习笔记系列——插值操