Vue 基於nodejs的vue專案打包編譯部署

2021-08-12 00:21:17 字數 1241 閱讀 6328

1·進入專案目錄下的終端執行命令

npm run build

正常情況如下圖,如遇到錯誤不會編譯成功,且編譯後的html檔案不能正常渲染。

2·編譯完成後進入專案下的

dist

目錄執行生成的

index.html檔案

開啟以後f12出現以下錯誤(資源檔案未找到)

開啟專案中的index.js檔案修改

build

裡的assetspublicpath

屬性為空即可

重新開啟index.html發現專案背景未找到

去css檔案裡找到未找到的檔名,進行搜尋

login_bg.162737a.png

修改資源檔案為相應img png的相對路徑

../img/login_bg.162737a.png

1·專案使用

作為啟動容器

2·環境搭建:

1.安裝apache主程式httpd:【yum install httpd】

2·啟動/sbin/service httpd start

3·專案目錄cd /var/www/

html

4·程式目錄/etc/httpd

3·預設使用

80埠,如需修改其他埠請

修改配置檔案 listen 80  為指定埠

4·把前端頁面放置在/var/www/

html下,如放在根目錄那就是伺服器ip:埠進行訪問

如在www目錄下新建目錄如

ump

那就是伺服器

ip:埠

+/ump

進行訪問

5·若無修改

配置檔案 需要,正常前端程式部署無需重啟

服務。

nodejs建立vue專案

1 安裝nodejs 2 安裝腳手架vue cli 安裝前最好先安裝 映象,不然安裝速度很慢 安裝 映象後npm用cnpm代替,其它命令不變 全域性安裝腳手架 cnpm install g vue cli 3 安裝成功後可以輸入vue檢視相關命令的使用,輸入vue list可以檢視vue可以用的模板...

vue 前端nodejs環境安裝

win dow系 統安裝n odej s環境 color window 系統安裝 node js環境 window系統 安裝nodejs環境 安裝nodejs方式 nvm安裝 nvm可以幫助我們快速切換 node.js版本。下面是通過nvm安裝node.js的。一 nvm安裝node.js 設定映象...

VUE,基於vue cli搭建建立vue專案

前提然後安裝vue cli 安裝方式 cmd命令列安裝 開啟cmd命令符輸入進行全域性安裝腳手架 npm install g vue cli 全域性腳手架安裝成功之後就可以建立vue專案了 三種建立方式 這裡演示第三種 第一種 舊版本建立專案,不推薦 首先要安裝依賴包npm install g vu...