導航:首頁 > IDC知識 > vue伺服器

vue伺服器

發布時間:2020-07-31 07:15:23

1、vue.js把原項目build下,放在伺服器上,如果以後要更新內容,怎麼更新啊,是在原項目文件更新在bulid下嗎

是,一般腳本都是直接刪除dist文件夾然後重新構建生成dist放到目標文件夾
你說的是伺服器有一套開發環境和代碼,然後在伺服器構建,不建議這樣做,畢竟很浪費伺服器空間,小東西可以這樣做。也可以直接把測試環境測試通過的代碼遷移到正式環境上

2、vue.js怎麼獲取伺服器時間

// 獲取時間通過JavaScript就可以
var date = new Date(); // 通過Date對象就可以獲取本地時間。

vue是一套JavaScript的漸進式MVVM框架,跟獲取伺服器時間沒有什麼關系,通過元素就js就可以獲取時間。

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

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

4、vue發布到伺服器一個目錄下,路由怎麼配置

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

5、vue如何將項目部署到伺服器上並且使外網能夠訪問到

你的伺服器是什麼系統啊 ,,,linux LINUX、WINDOWS、NETWARE、UNIX。。

在linux

首先伺服器安裝node git nginxvue-cli

安裝好nginx 用你的公網ip訪問就可以看到 下面的頁面

然後進入到下面的路徑

vi default 你會看到nginx的默認配置

默認監聽80埠 根路徑

把你寫好的vue項目 上傳到github ,通過git clone 克隆到

伺服器

路徑下面

然後npm/yarn add/install 安裝依賴 然後npm run build

vi 打開html 下面的 index.html 可以看到

nginx默認的html

進入sites-enabled 發現 它裡面的 default 來自 sites-available的default

所以需要在 sites-available 新建一個文件 你的項目名命名就可以

在你新建的文件

我在site-available新建的文件是note-admin 映射到 sites-enables

注意路徑一定要寫全

最後重新載入下 nginx -s reload

打開瀏覽器 公網ip:埠號或者 域名訪問

這就可以了

還有 用express 部署這個 簡單些

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

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

[plain] view plain copy

cd /etc  

apt-get update  

apt-get install nginx  

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

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

[plain] view plain copy

vim /etc/nginx/nginx.conf  

在nginx.conf中配置如下:

[plain] view plain copy

user www-data;  

worker_processes auto;  

pid /run/nginx.pid;  

events {  

        worker_connections 768;  

        # multi_accept on;  

}  

http {  

  

        ##  

        # Basic Settings  

        ##  

  

        tcp_nodelay on;  

        keepalive_timeout 65;  

        types_hash_max_size 2048;  

        # server_tokens off;  

  

        # server_names_hash_bucket_size 64;  

        # server_name_in_redirect off;  

  

        include /etc/nginx/mime.types;  

        default_type application/octet-stream;  

  

        ##  

        # SSL Settings  

        ##  

  

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE  

        ssl_prefer_server_ciphers on;  

  

        ##  

        # Logging Settings  

        ##  

  

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

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

  

        ##  

        # Gzip Settings  

        ##  

  

        gzip on;  

        gzip_disable "msie6";  

  

        # gzip_vary on;  

        # gzip_proxied any;  

        # gzip_comp_level 6;  

        # gzip_buffers 16 8k;  

        # gzip_http_version 1.1;  

  

        ##  

        # Virtual Host Configs  

        ##  

  

  

        gzip on;  

        gzip_disable "msie6";  

  

        # gzip_vary on;  

        # gzip_proxied any;  

        # gzip_comp_level 6;  

        # gzip_buffers 16 8k;  

        # gzip_http_version 1.1;  

        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;  

  

        ##  

        # Virtual Host Configs  

        ##  

  

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

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

        #以下為我們添加的內容  

       server {               

              listen 80;  

              server_name your-ipaddress;  

  

              root /home/my-project/;  

              index index.html;  

              location /datas {  

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

              include uwsgi_params;  

              proxy_pass http://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 copy

assetsPublicPath: '/test1/',  

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

[javascript] view plain copy

export default new Router({  

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

  linkActiveClass: 'active',  

  routes  

});  

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

[javascript] view plain copy

const url = '/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 copy

service nginx start  

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

     

      

7、vue.js 本地 怎麼做伺服器渲染

從官方給出的渲染方案能看出,後端只是在頁面硬塞了數據及數據狀態進去,就效果而論渲染的工作還是前端負責,所以其他後端也能做到。具體看例子寫script標簽到頁面那段.
vue的服務端渲染,目前發現下面兩個包可以實現nodejs向其他伺服器請求數據。我現在用的是axios,因為我看到axios同時支持nodejs和瀏覽器。

8、vue2.5.2是用什麼創建的伺服器

Vue-cli使用Node開啟一個開發環境伺服器

9、運行VUE項目,總是失敗,伺服器可以啟動,頁面出現Cannot GET /

使用排除法吧,首先你這個項目是第一次創建的嗎?如果是,去創建項目的文件夾看看有沒有生成node_moles文件夾。如果沒有,去配置裡面把緩存刪除再重新創建項目。如果是把已有項目重新開發的話,先npm install然後再npm run dev

與vue伺服器相關的知識