日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當(dāng)前位置: 首頁 > 前端技术 > vue >内容正文

vue

vuejs怎么在服务器上发布部署

發(fā)布時(shí)間:2023/12/13 vue 31 豆豆
生活随笔 收集整理的這篇文章主要介紹了 vuejs怎么在服务器上发布部署 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

首先VUE 是一個(gè)javascript的前端框架,注定了它是運(yùn)行在瀏覽器里的,對(duì)服務(wù)器本地沒有任何要求,只要一個(gè)靜態(tài)文件服務(wù)器能通過http訪問到其資源文件就足矣!無論你是用apache ,ngnix 就算你要用node 自己實(shí)現(xiàn)一個(gè)靜態(tài)文件服務(wù)器,也用不了多少行代碼。

npm run dev 是用來在本地開發(fā)的時(shí)候做調(diào)試用的,vue開發(fā)的是前端的東西,不是nodejs 服務(wù)端程序,按道理講,生產(chǎn)環(huán)境里就不該存在npm,甚至nodejs也不需要(用nodejs來做web靜態(tài)服務(wù)的除外),樓主通過ssh進(jìn)入到服務(wù)器里,再運(yùn)行npm run dev 來啟動(dòng)哪是開發(fā)機(jī)上做的事情。正確的做法很簡(jiǎn)單,通過npm run build 把生成的dist文件夾(不要上傳文件夾)里的內(nèi)容上傳到http服務(wù)器上就可以通過 http來訪問了,開發(fā)機(jī)上正常,上傳以后 程序出現(xiàn)錯(cuò)誤不能運(yùn)行的原因99.99%的可能性是你引用資源的路徑有問題。

一般如果vue框架的程序上傳到網(wǎng)站服務(wù)器的根目錄下是不 會(huì)有問題的,也不存在資源文件引用錯(cuò)誤的情況,但如果你不是根目錄,就會(huì)有問題,通過vue-cli 生成的開發(fā)目錄,build以后默認(rèn)引用資源文件的路徑是

比如 app.js的引用方式<script type="text/javascript" src="/static/js/app.js"></script>

所以,如果你的目錄結(jié)構(gòu)是 如下

www/+hot/+static/+index.html

當(dāng)你通過xxx.com/hot/index.html來訪問的時(shí)候 會(huì)出現(xiàn)找不到app.js

因?yàn)閕ndex.html里引用的app.js路徑是

http://www.xxx.com/static/js/app.js

但是app.js的實(shí)際路徑是

http://www.xxx.com/hot/static/js/app.js 所以出現(xiàn)了404

要解決的方法很簡(jiǎn)單把引用方式 改成如下兩種方式 都可以

<script type="text/javascript" src="./static/js/app.js"></script> 或者 <script type="text/javascript" src="/hot/static/js/app.js"></script> 推薦這樣的方式,可以保正在vue-router生成的url下也不出現(xiàn)問題

都可以,當(dāng)然這也不需要手動(dòng)去改,

在webpack的配置文件中修改

assetsPublicPath: './' 或者 assetsPublicPath: '/hot/',

這樣,我們就基本解決了有服務(wù)器子目下運(yùn)行的問題,

當(dāng)然,如果你還用到了vue-router

要在router的配置中加上

export default new Router({mode: 'history',base: '/hot/', //加上這一行

用瀏覽器打開xxx.com/hot/

一切運(yùn)行正常,點(diǎn)擊各種鏈接也能出來,但是由于我啟用了history模式,我直接在瀏覽里訪問 xxx.com/hot/item/1 這樣的url是又404了,為什么 我可以在首頁通過點(diǎn)擊進(jìn)入 xxx.com/hot/item/1 這個(gè)頁面,但是直接訪問又不行呢,

因?yàn)樵趆istory 模式下,只是動(dòng)態(tài)的通過js 操作window.history 來改變有瀏覽器地址欄里的路徑,并沒有發(fā)起http請(qǐng)求,但當(dāng)你直接 在瀏覽器里輸入這個(gè)地址的時(shí)候 就一定要先對(duì)服務(wù)器放起http請(qǐng)求,但是這個(gè)目標(biāo)在服務(wù)器上又不存在所以就返回了404了,怎么解決呢,就是把所有的請(qǐng)求全部轉(zhuǎn)發(fā)到xxx.com/hot/index.hmtl上就可以了

我用的是apache 做web服務(wù)器的虛擬空間,而且開啟支.htaccess文件支持,

我成我的文件里加上如下,就一切正常了,

<IfModule mod_rewrite.c>Options +FollowSymlinksRewriteEngine OnRewriteCond %{REQUEST_URI} ^/(hot|hot/.*)$RewriteRule ^/hot/index\.html$ - [L,NC]RewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_FILENAME} !-fRewriteRule ^(hot|hot/.*)$ hot/index.html [L] </IfModule>

這個(gè)配置的作用就是把所有服務(wù)器上不存在請(qǐng)求全部轉(zhuǎn)發(fā)到index.html上去,這樣就可以直接通過各種url來訪問了

總結(jié)

以上是生活随笔為你收集整理的vuejs怎么在服务器上发布部署的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。