vuejs怎么在服務器上發布部署

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

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

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

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

所以,如果你的目錄結構是 如下

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

當你通過xxx.com/hot/index.html來訪問的時候 會出現找不到app.js

因為index.html里引用的app.js路徑是

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

但是app.js的實際路徑是

http://www.xxx.com/hot/static/js/app.js 所以出現了404

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

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

都可以,當然這也不需要手動去改,

在webpack的配置文件中修改

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

這樣,我們就基本解決了有服務器子目下運行的問題,

當然,如果你還用到了vue-router

要在router的配置中加上

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

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

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

因為在history 模式下,只是動態的通過js 操作window.history 來改變有瀏覽器地址欄里的路徑,并沒有發起http請求,但當你直接 在瀏覽器里輸入這個地址的時候 就一定要先對服務器放起http請求,但是這個目標在服務器上又不存在所以就返回了404了,怎么解決呢,就是把所有的請求全部轉發到xxx.com/hot/index.hmtl上就可以了

我用的是apache 做web服務器的虛擬空間,而且開啟支.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>

這個配置的作用就是把所有服務器上不存在請求全部轉發到index.html上去,這樣就可以直接通過各種url來訪問了

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247711.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247711.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247711.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

C#入門詳解(14)

接口&#xff0c;依賴反轉&#xff0c;單元測試 接口是協約是規定&#xff0c;所以必須是公開的&#xff0c;只能是public; static void Main(string[] args){int[] num1 new int[] { 1, 2, 3, 4, 5 };Console.WriteLine(Sum(num1).ToString());Console.WriteLine(""…

SpringBoot操作MongoDB實現增刪改查

本篇博客主講如何使用SpringBoot操作MongoDB。 SpringBoot操作MongoDB實現增刪改查 &#xff08;1&#xff09;pom.xml引入依賴 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifac…

java面向對象的特征三:多態性 —(15)

1.多態性的理解&#xff1a;可以理解為一個事物的多種形態。 2.何為多態性&#xff1a; 對象的多態性&#xff1a;父類的引用指向子類的對象&#xff08;或子類的對象賦給父類的引用&#xff09; 舉例&#xff1a; Person p new Man(); Object obj new Date(); 3.多態性的…

vue 中$index $key 已移除

之前可以這樣: 123456<ulid"example"><liv-for"item in items">{{$index}}{{$key}}</li></ul>現在已經移除,如果還用的話就會報錯:Uncaught ReferenceError: $index is not defined; 現在這樣寫: 123456<ul id"example&qu…

vue-resource全攻略

Vue.js——vue-resource全攻略 概述 上一篇我們介紹了如何將$.ajax和Vue.js結合在一起使用&#xff0c;并實現了一個簡單的跨域CURD示例。Vue.js是數據驅動的&#xff0c;這使得我們并不需要直接操作DOM&#xff0c;如果我們不需要使用jQuery的DOM選擇器&#xff0c;就沒有必要…

java面向對象:關鍵字 —(16)

static:靜態的 1.可以用來修飾的結構&#xff1a;主要用來修飾類的內部結構 屬性、方法、代碼塊、內部類 2.static修飾屬性&#xff1a;靜態變量&#xff08;或類變量&#xff09; 2.1 屬性&#xff0c;是否使用static修飾&#xff0c;又分為&#xff1a;靜態屬性 vs 非靜態…

《少年先瘋隊》第九次團隊作業:Beta沖刺與團隊項目驗收

博文簡要信息表&#xff1a; 項目內容軟件工程https://www.cnblogs.com/nwnu-daizh/本次實驗鏈接地址https://www.cnblogs.com/nwnu-daizh/p/11056511.html團隊名稱少年先瘋隊作業學習目標&#xff08;1&#xff09;掌握軟件黑盒測試技術&#xff1b;&#xff08;2&#xff09;…

vue-resource jsonp跨域問題解決方法

最近在學習vue.js 碰到個ajax跨域請求的問題&#xff0c;之前知道可以用jsonp解決&#xff0c;但是一直沒實踐過&#xff0c;這次用發現里面好多問題&#xff0c;所以現在記錄下來&#xff0c;希望可以給剛接觸使用jsonp的同學一點幫助&#xff01; 關于什么是jsonp&#xff0c…

虛擬機無法連接至網絡

問題&#xff1a; 虛擬機中的win XP系統無法連接至外部win10系統網絡 嘗試解決方法&#xff1a; 1&#xff09;換用橋接模式和NAT模式&#xff0c;無效 2&#xff09;恢復虛擬機網絡屬性至默認狀態&#xff0c;無效 最終解決方法&#xff1a; 換用外部無線網絡&#xff0c;即能…

java面向對象:關鍵字 —(17)

interface:接口 1.使用說明&#xff1a; 1.接口使用interface來定義 2.Java中&#xff0c;接口和類是并列的兩個結構3.如何定義接口&#xff1a;定義接口中的成員 3.1 JDK7及以前&#xff1a;只能定義全局常量和抽象方法>全局常量&#xff1a;public static final的.但是…

原生js來實現對dom元素class的操作方法

jQuery操作class的方式非常強大 寫了一個利用原生js來實現對dom元素class的操作方法 1.addClass:為指定的dom元素添加樣式 2.removeClass:刪除指定dom元素的樣式 3.toggleClass:如果存在(不存在)&#xff0c;就刪除(添加)一個樣式 4.hasClass:判斷樣式是否存在 下面為一toggleC…

python+selenium配置Edge瀏覽器

Chrome, Firefox只需要修改conftest.py文件中的 pytest.fixture(scopesession)def browser(): return BzwUtil.read_yml(config.yml,WEB_INFO,BROWSER) add option in pytest command line def pytest_addoption(parser): parser.addoption("--browser", actio…

JSON.parse和JSON.stringify方法

JSON.parse() JSON.parse()方法將json字符串轉化為Javascript值或對象。 語法 JSON.parse(text[,reviver]) 參數 text:要被解析成Javascript值的字符串 reviver:若是一個函數則規定了原始值(text)如何被解析改造&#xff0c;在被返回前。 示例 JSON.parse({}); //…

java面向對象:異常處理 —(18)

1. 異常的體系結構 java.lang.Throwable |-----java.lang.Error:一般不編寫針對性的代碼進行處理。|-----java.lang.Exception:可以進行異常的處理|------編譯時異常(checked)|-----IOException|-----FileNotFoundException|-----ClassNotFoundException|------運行時異常(un…

vue請求簡單配置

簡單記錄一下vue的http請求配置相關 測試環境請求接口設置:   1. config/dev.env.js添加&#xff1a;     module.exports merge(prodEnv, {       NODE_ENV: "development",       API_ROOT: "http://", //配置http請求頭     })…

【vue報錯】——listen EADDRINUSE :::8080 解決方案

問題原因&#xff1a; 此項錯誤表示 8080 端口被占用 解決方案一&#xff1a; 打開cmd 輸入&#xff1a;netstat -ano 查看所有端口信息&#xff0c;如圖&#xff0c;找到端口 8081&#xff0c;以及對應的 PID 輸入&#xff1a;tskill PID 即可殺死進程 解決方案二&#xff1a…

記錄_20190626

java.lang.ArithmeticException: Non-terminating decimal expansion; no exact representable decimal result異常的解決方法 原來JAVA中如果用BigDecimal做除法的時候一定要在divide方法中傳遞第二個參數&#xff0c;定義精確到小數點后幾位&#xff0c;否則在不整除的情況下…

String與Array

public class Api {Testpublic void StringApi(){// equals() 判斷內容是否相同區分大小寫// equalsIgnoreCase() 判斷內容是否相同不區分大小寫// length() 獲取長度// charAt(int index) 獲取某個索引位置的字…

HTML與CSS布局技巧總結

很多人對CSS的布局有困惑&#xff0c;實際的應用場景中由于布局種類多難以選擇。今天我花些時間總結下自己對CSS布局的理解&#xff0c;分析下了解各種布局的優劣&#xff0c;同時希望能分享給初入前端的朋友們一些在布局上的經驗&#xff0c;如果有那些地方總結的不好&#xf…

當談論迭代器時,我談些什么?

花下貓語&#xff1a;之前說過&#xff0c;我對于編程語言跟其它學科的融合非常感興趣&#xff0c;但我還說漏了一點&#xff0c;就是我對于 Python 跟其它編程語言的對比學習&#xff0c;也很感興趣。所以&#xff0c;我一直希望能聚集一些有其它語言基礎的同學&#xff0c;一…