雲伺服器運行vuedist
⑴ 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
vim/etc/nginx/nginx.conf
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;
}
}
}
assetsPublicPath:'/test1/',
exportdefaultnewRouter({
base:'/test1/',//添加這行
linkActiveClass:'active',
routes
});
consturl='/datas/seller';
this.$http.get(url).then((response)=>{
.....
});
servicenginxstart
2.首先先配置nginx，然後再根據配置文件做下一步操作
打開/etc/nginx/nginx.conf文件
[plain]view plain
在nginx.conf中配置如下：
[plain]view plain
接下來就根據配置文件進行下一步工作。配置文件中的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
如果用到了vue-router，則修改/router/index.js
[javascript]view plain
6.nginx配置文件中的location則是針對跨域處理，表示把對/datas的請求轉發給http://ip:port,本文中這個http://ip:port下就是需要的數據，例如http://ip:port/seller,在本地項目文件中ajax請求數據的地方如下
[javascript]view plain
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
9.至此項目部署成功，在瀏覽器下輸入: http://ip/test1/index.html 即可