當前位置:首頁 » 雲伺服器 » 雲伺服器運行vuedist

雲伺服器運行vuedist

發布時間: 2022-12-22 04:43:17

⑴ Vue本地項目過程隨筆(4) 部署到伺服器

伺服器購買,埠開放不再多講 文件的上傳使用 Xftp

工作經歷內容用到的 省略號特效

本地Vue項目打包,生成文件放在Vue項目目錄下的dist文件夾

在阿里雲伺服器控制台內安裝nodejs,埠開放在防火牆選項下

安裝nginx

npm install命令遇到relocation error: npm: symbol SSL_set_cert_cb的報錯問題

改標簽欄icon,以及標簽名

安裝完nginx後 用Xftp登陸伺服器,上傳打包好的項目。

保存,回到伺服器控制台輸入 重新運行nginx

現在可以通過ip地址訪問到打包過的Vue項目了
我的項目鏈接: http://phantomcorner.tech
Github

⑵ vue-cli + webpack 打包後的dist文件怎麼在伺服器中運行

使用nginx,借鑒網頁鏈接

⑶ 本地運行vue dist文件

當我們vue工作完成以後會打包一份dist文件給後台,之前本地肯定要測試一下,下面就是本人踩的一些坑,跟大家分享一下

a) 我們打包為dist以後第一個問題,我們打包為dist以後經常會遇見路徑出錯,也就是dom出現但是js與css不會出現,顯示路徑錯誤。

解決方法:打開腳手架的config文件中的index.js文件,查看build對象內的assetsPublicPath(發布路徑)是否為"./"。默認的情況下是"/",但是"/"是絕對路徑,而"./"是相對路徑

絕對路徑:就是你的主頁上的文件或目錄在硬碟上真正的路徑,比如c:/apache/cgi-bin下的路徑就是c:/apache/cgi-bin;

相對路徑:顧名思義就是相對於當前文件的路徑

b)路徑沒有問題了。文件可以引入進來了,那麼怎麼本地運行呢,因為dist文件是要有服務啟動的,一本情況下後台會啟動服務,但是總不能每一次都讓後台打包吧

解決方法:

  1.這是dev內設置服務代理,

proxyTable: {

      '/api': {  //代理地址

        target: 'http://39.104.50.205',  //需要代理的地址

        changeOrigin: true,  //是否跨域

        secure: false,  // 如果是https介面,需要配置這個參數

        pathRewrite: {

            '^/api': '/api'  //本身的介面地址沒有 '/api' 這種通用前綴,所以要rewrite,如果本身有則去掉

        },

      },

    },

2.配置開發環境與生產環境

在config/dev.env.js和prod.env.js里也就是開發/生產環境下分別配置一下請求的地址API_HOST

mole.exports = merge(prodEnv, {

  NODE_ENV: '"development"', // 開發環境

  API_HOST: '"/api/"'

})

mole.exports = {

  NODE_ENV: '"proction"', // 生產環境

  API_HOST: '"http://xxx.com/"'

}

3.調用

created() {

    console.log(process.env.NODE_ENV, '環境')

    let urlHost = process.env.API_HOST // 會自動判斷當前是開發還是生產環境,然後自動匹配API_HOST

     axios.get(urlHost + 'DemoApi/oftenGoods.php')

    .then((res) => {

        console.log(res, '代理之後')

    })

}

好了,就這么多配置本地運行dist文件的方法大家git到了嗎

⑷ vuejs怎麼在伺服器部署

既然是布署,哪默認就應該是生產環境下的布署,vue開發的應用本質上就是靜態文件,無論你用何種web伺服器,放上去就應該能通過http訪問

接下來我來幫大家來捋一捋

首先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以後默認引用資源文件的路徑是

有更多疑問 」可以咨詢 」小鳥雲,它是的一家伺服器廠商,我一直在用他們產品!

⑸ vue項目部署iis伺服器

一、將vue項目進行打包編譯後,根目錄生成dist的文件

當出現如上圖顯示時,說明打包編譯完成,已經生成dist文件

二、打開iis伺服器
打開iis伺服器後選中【網站】後右擊選【添加網站】,就可對網站進行配置,物理路徑選擇編譯後的dist文件夾後選確定就行。

三、右擊選擇【啟動】後出現如下報錯信息:
除非Windows Activation Service (WAS)和萬維網發布服務(W3SVC)均處於運行狀態,否則無法啟動網站

解決:
打開命令提示符中輸入services.msc ,打開服務。
找到windows install及word wide web發布服務選項,分別右擊啟動,並右鍵屬性改為啟動類型就可以。

這是重新啟動下,就可以訪問。

⑹ vue項目如何部署到伺服器

第一步配置 vue.config.js

第二步修改路由,改為 hash模式

第三步文件打包,執行以下,目錄中會出現一個dist文件夾,將文件拖到伺服器的 root 文件夾中

第四步可以通過域名進行訪問 http://www.linlin.run/my-project/index.html#/home

⑺ 如何打包vue項目加node.js後端到雲伺服器

在命令行輸入npm run build:prod,等待打包完成

項目目錄下就會多出一個dist文件夾,裡面有index.html文件和static文件夾,
直接上傳到伺服器上就行了

⑻ 前端vue與後端Thinkphp在伺服器的部署

vue在服務端部署時,我們都知道通過npm run build 指令打包好的dist文件,通過http指定是可以直接瀏覽的,Thinkphp通過域名指向index.php文件才可以瀏覽。要使前端正常調用後端數據,有兩種方法:1、前端跨域調用後端數據,2、前端打包文件部署在後端的伺服器文件夾下(同域)。

web伺服器: apache

一、跨域

在伺服器配置站點:

在路徑/home/www/  下創建test項目文件夾,用來放項目文件。  

找到httpd-vhosts.conf文件配置站點  

前端站點:  

    ServerName test.test.com  

    DocumentRoot "/home/www/test/dist"    

    DirectoryIndex index.html  

後端站點:  

    ServerName test.testphp.com  

    DocumentRoot "/home/www/test/php"    

    DirectoryIndex index.php  

將前端打包好的dist文件放在/home/www/test/ 文件夾下,運行http://test.test.com可瀏覽,當路徑改變時,刷新會出現404錯誤。此時dist文件下創建一個.htaccess文件,當路徑不存在時,路徑指向http://test.test.com/index.html能解決此問題。

  RewriteEngine On  

  RewriteBase /  

  RewriteRule ^index\.html$ - [L]  

  RewriteCond %{REQUEST_FILENAME} !-f  

  RewriteCond %{REQUEST_FILENAME} !-d  

  RewriteRule . /index.html [L]  

在/home/www/test文件夾下創建項目根目錄php文件夾,將thinkphp文件放在php下。TP5的入口文件在public文件下,在這將public下的入口文件index.php挪到php文件夾下(個人習慣將入口文件放在項目根目錄), 後端綁定Index模塊。

前端調用後端介面,存在跨域,跨域解決方法有好幾種,在這我將在後端php做配置,解決跨域問題,在公用控制器設置跨域配置:

class Common extends Controller  

{  

    public $param;  

    // 設置跨域訪問  

    public function _initialize()  

    {  

        parent::_initialize();  

        isset($_SERVER['HTTP_ORIGIN']) ? header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']) : '';  

        header('Access-Control-Allow-Credentials: true');  

        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');  

        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId");  

$param =  Request::instance()->param();  

$this->param = $param;  

    }  

}  

前端調用登錄介面: this.axios.post('http://test.testphp.com/index.php/base/login', {user: '', password: ''})。

(可在webpack.base.conf.js文件下可定義介面:http://test.testphp.com/index.php/)

二、同域

後端配置同上,公共配置器中的header配置注釋。將前端的dist文件下的所有文件(包含.htaccess),放在php文件夾下。將後端index控制器的index方法的路徑重定向php下的index.html文件:

namespace app\index\controller;  

use think\Controller;  

class Index extends Controller  

{  

    public function index() {  

$this->redirect('/index.html');  

    }  

}  

前端調用登錄介面: this.axios.post('/index.php/base/login', {user: '', password: ''})

轉自:https://blog.csdn.net/qq_35465132/article/details/78986675

⑼ 用webpack打包的vue項目後生成的dist文件有什麼用,如何使用

將打包好的dist文件扔到伺服器上的Tomcat---》webapp下,打開瀏覽器訪問伺服器的網址加埠號項目名 例:http://192.168.1.8:81/test/

⑽ 怎麼把VUE項目部署到伺服器上面

1.使用xshell登錄到阿里雲伺服器。安裝nginx(本文安裝到/etc下)

[plain]view plain

  • cd/etc

  • apt-getupdate

  • apt-getinstallnginx

  • 2.首先先配置nginx,然後再根據配置文件做下一步操作

    打開/etc/nginx/nginx.conf文件

    [plain]view plain

  • vim/etc/nginx/nginx.conf

  • 在nginx.conf中配置如下:

    [plain]view plain

  • userwww-data;

  • worker_processesauto;

  • pid/run/nginx.pid;

  • events{

  • worker_connections768;

  • #multi_accepton;

  • }

  • http{

  • ##

  • #BasicSettings

  • ##

  • tcp_nodelayon;

  • keepalive_timeout65;

  • types_hash_max_size2048;

  • #server_tokensoff;

  • #server_names_hash_bucket_size64;

  • #server_name_in_redirectoff;

  • include/etc/nginx/mime.types;

  • default_typeapplication/octet-stream;

  • ##

  • #SSLSettings

  • ##

  • ssl_protocolsTLSv1TLSv1.1TLSv1.2;#DroppingSSLv3,ref:POODLE

  • ssl_prefer_server_cipherson;

  • ##

  • #LoggingSettings

  • ##

  • access_log/var/log/nginx/access.log;

  • error_log/var/log/nginx/error.log;

  • ##

  • #GzipSettings

  • ##

  • gzipon;

  • gzip_disable"msie6";

  • #gzip_varyon;

  • #gzip_proxiedany;

  • #gzip_comp_level6;

  • #gzip_buffers168k;

  • #gzip_http_version1.1;

  • ##

  • #VirtualHostConfigs

  • ##

  • gzipon;

  • gzip_disable"msie6";

  • #gzip_varyon;

  • #gzip_proxiedany;

  • #gzip_comp_level6;

  • #gzip_buffers168k;

  • #gzip_http_version1.1;

  • #gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;

  • ##

  • #VirtualHostConfigs

  • ##

  • include/etc/nginx/conf.d/*.conf;

  • include/etc/nginx/sites-enabled/*;

  • #以下為我們添加的內容

  • server{

  • listen80;

  • server_nameyour-ipaddress;

  • root/home/my-project/;

  • indexindex.html;

  • location/datas{

  • rewrite^.+datas/?(.*)$/$1break;

  • includeuwsgi_params;

  • proxy_passhttp://ip:port;

  • }

  • }

  • }

  • 接下來就根據配置文件進行下一步工作。配置文件中的server_name後面是阿里雲伺服器的ip地址

    3.配置文件中的listen是nginx監聽的埠號,所以需要在阿里雲伺服器上為80埠添加安全組規則

    在本地的瀏覽器登錄阿里雲伺服器->進入控制台->點擊安全組->點擊配置規則->點擊添加安全組規則,之後配置如下(註:入方向和出方向都要配置)


    4.配置文件中的root和index那兩行表示我們把項目文件夾放在/home/my-project下

    例如有兩個項目文件夾分別為test1,test2,裡面都有index.html。則目錄結構如下

    /home

    |--my-project

    |--test1

    |--index.html

    |--test2

    |--index.html

    則在瀏覽器輸入http://ip/test1/index.html

    伺服器便會在/home/my-project中找到test1下的index.html執行;

    如果在瀏覽器中輸入http://ip/test2/index.html

    伺服器便會在/home/my-project中找到test2下的index.html執行;

    這樣便可以在伺服器下放多個項目文件夾。

    5.所以我們也需要在本地項目的config/index.js里的build下進行修改,如果要把項目放到test1下,則

    [javascript]view plain

  • assetsPublicPath:'/test1/',

  • 如果用到了vue-router,則修改/router/index.js

    [javascript]view plain

  • exportdefaultnewRouter({

  • base:'/test1/',//添加這行

  • linkActiveClass:'active',

  • routes

  • });

  • 6.nginx配置文件中的location則是針對跨域處理,表示把對/datas的請求轉發給http://ip:port,本文中這個http://ip:port下就是需要的數據,例如http://ip:port/seller,在本地項目文件中ajax請求數據的地方如下

    [javascript]view plain

  • consturl='/datas/seller';

  • this.$http.get(url).then((response)=>{

  • .....

  • });

  • 7.修改後在本地命令行下運行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上傳到伺服器的/home/my-project/test1下,目錄結構如下

    /home

    |--my-project

    |--test1

    |--index.html

    |--static

    8.啟動nginx

    [plain]view plain

  • servicenginxstart

  • 9.至此項目部署成功,在瀏覽器下輸入: http://ip/test1/index.html 即可



熱點內容
翻杯子演算法 發布:2025-03-16 03:34:31 瀏覽:602
ftp後台密碼怎麼設置 發布:2025-03-16 03:33:08 瀏覽:360
阿里雲伺服器的sdk是免費的嗎 發布:2025-03-16 03:33:04 瀏覽:7
卸載linux軟體 發布:2025-03-16 03:19:07 瀏覽:808
太平天國迅雷下載ftp 發布:2025-03-16 03:13:19 瀏覽:64
伺服器硬碟溫度怎麼調節 發布:2025-03-16 03:11:47 瀏覽:74
netcore編譯前執行代碼 發布:2025-03-16 03:05:17 瀏覽:475
飢荒聯機版伺服器搭建程序 發布:2025-03-16 02:55:18 瀏覽:684
win7如何訪問共享 發布:2025-03-16 02:55:14 瀏覽:37
centosphp升級 發布:2025-03-16 02:42:04 瀏覽:52