在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/Linux  HTML/ vue-cli 部署到線上那些服務(wù)如何配置?

vue-cli 部署到線上那些服務(wù)如何配置?

不會線上配置,用linux ssh 上傳項目到服務(wù)器上,vue-cli 報錯.
不知道有哪些配置需要注意并且修改的

回答
編輯回答
來守候

謝謝邀請!

官方基于webpack開發(fā)了一個vue-cli工具,它更多的是作為一個本地打包編譯器。當(dāng)代碼完成后,我們在本地把vue文件編譯成常規(guī)的HTML/CSS/JS文件,然后上傳到你的服務(wù)器就可以了。
如果需要修改打包文件的生成路徑,主要就是/config/index.js和/build/webpack.base.conf.js這兩個文件的配置項需要更改。具體怎么修改因項目結(jié)構(gòu)的不同而不同,具體請參考webpack的文檔

2018年2月28日 01:17
編輯回答
涼心人

謝邀!
單頁面應(yīng)用應(yīng)該放到nginx或者apache、tomcat等web代理服務(wù)器中,同時要根據(jù)自己服務(wù)器的項目路徑更改vue的路由地址。

如果說項目是直接跟在域名后面的,比如:http://www.sosout.com ,根路由就是 '/'。
如果說項目是直接跟在域名后面的一個子目錄中的,比如:http://www.sosout.com/children ,根路由就是 '/children ',不能直接訪問index.html。

以配置Nginx為例,配置過程大致如下:
(假設(shè):1、項目文件目錄: /mnt/html/vueCli(vueCli目錄下的文件就是執(zhí)行了打包后生成的目標(biāo)目錄下的文件);2、訪問域名:vue.sosout.com)

進入nginx.conf新增如下配置:

server {
    listen 80;
    server_name vue.sosout.com;
    root /mnt/html/vueCli;
    index index.html;
    location ~ ^/favicon.ico$ {
        root /mnt/html/vueCli;
    }

    location / {
        try_files $uri $uri/ /index.html;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto  $scheme;
    }
    access_log  /mnt/logs/nginx/access.log  main;
}

注意事項:
1、配置域名的話,需要80端口,成功后,只要訪問域名即可訪問的項目
2、如果你使用了vue-router的history模式,在nginx配置還需要重寫路由:

server {
    listen 80;
    server_name vue.sosout.com;
    root /mnt/html/vueCli;
    index index.html;
    location ~ ^/favicon.ico$ {
        root /mnt/html/vueCli;
    }
    
    location / {
        try_files $uri $uri/ @fallback;
        index index.html;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto  $scheme;
    }
    location @fallback {
        rewrite ^.*$ /index.html break;
    }
    access_log  /mnt/logs/nginx/access.log  main;
}

為什么要重寫路由?
因為我們的項目只有一個根入口,當(dāng)輸入類似/home的url時,如果找不到對應(yīng)的頁面,nginx會嘗試加載index.html,這是通過vue-router就能正確的匹配我們輸入的/home路由,從而顯示正確的home頁面,如果history模式的項目沒有配置上述內(nèi)容,會出現(xiàn)404的情況。

2017年4月1日 04:51