① 為什麼vue項目部署上線後首屏有時會空白或者css文件404，刷新一下就又好了
這個問題我曾經試過，肯定是你載入的時候，路由裡面不是寫了根路徑，
你在路由裡面把首頁的路徑改成根路徑，然後在導航條上設置為根路徑。
我上面就是沒有設置為根路徑，使用一進來的時候就會出現只載入了頭部和尾部，刷新一下才出現頁面，改成根路徑之後完美解決。
② vuejs怎麼在伺服器部署
通過vue-cli搭建的基於webpack結構的工程項目
1、build前的配置，防止js、css文件路徑錯誤
在目錄build下面找到webpack.prod.conf.js文件，找到output節點，添加【publicPath:'./'】
2、執行命令【npm run build】build項目
3、在跟目錄下會生成dist目錄，裡面的內容就是構建的結果，包含html、css、js文件等
4、將構建結果dist目錄下面的內容放在nginx的發布目錄【/usr/share/nginx/html/vuedemo】中
5、通過http://172.10.10.69/vuedemo/訪問測試
③ Vue項目部署到Tomcat上面
你現在的這個情況是通過vue打包後，build之後的產物。
先不多說，直接說方法，最後再解釋。
想運行在tomcat上，先在打包之前做一下配置：
首先在config文件夾下找到index.js修改一下當前路徑
把assetsPublicPath：『/』改成assetsPublicPath：『./『
對就是/前面加個點兒。
然後重新打包。就可以直接打開了。
======================================
為什麼這樣做呢，因為vue的打包默認形成的是一個部署在伺服器環境上的文件，如果是部署在靜態站點上（express或者阿帕奇），就需要做路徑轉變。其實算是個小tip。
歡迎追問。
④ 怎麼把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 即可
⑤ vuejs怎麼在伺服器部署
用vue-cli搭建的做法
1、npm run build
2、把dist里的文件打包上傳至伺服器 例 /data/www/，我一般把index.html放在static里
所以我的文件路徑為：
/data/www/static
|-----index.html
|-----js
|-----css
|-----images
....
3、配置nginx監聽80埠， location /static alias 到 /data/www/static，重啟nginx
location /static {
alias /data/www/static/;
}
4、瀏覽器訪問即可
⑥ vue.js 打包後怎麼部署到tomcat，頁面空白
我覺得除了要檢查你伺服器與本地的jdk版本之外，還要查看jar包的問題，尤其是tomcat下的jsp-api.jar和servlet-api.jar這兩個包是否正確引用……
⑦ vue webpack build.js怎麼部署後怎麼通過路由訪問
vue webpack build.js部署後通過路由訪問：
{
"name": "firstvue",
"version": "1.0.0",
"description": "vue+webapck",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline"
},
"dependencies": {
"vue": "^1.0.18",
"vue-router": "^0.7.13"
},
"devDependencies": {
"autoprefixer-loader": "^2.0.0",
"babel": "^6.3.13",
"babel-core": "^6.3.21",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-preset-es2015": "^6.3.13",
"babel-runtime": "^5.8.34",
"css-loader": "^0.16.0",
"file-loader": "^0.8.5",
"html-loader": "^0.3.0",
"node-sass": "^3.4.2",
"sass-loader": "^3.2.0",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"vue-html-loader": "^1.2.0",
"vue-loader": "^7.2.0",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.14.0"
},
"author": "xiaoming",
"license": "MIT",
"keywords": [
"vue",
"webpack"
]
}
<template>
<div class="head">
<input type = "text" value = "{{ title }}"></input>
<input type = "submit" v-on:click="golist()" ></input>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
title: "這是登錄界面"
}
},
methods :{
golist () {//方法，定義路由跳轉，注意這里必須使用this，不然報錯
this.$route.router.go({path:"/register"});
}
}
}
</script>
⑧ 為什麼vue打包後出現後 在瀏覽器上打開的是空白頁
這是因為路由配置中路勁的問題，原因是你配置的URL是這種形式的：
但是你的路由配置卻是直接訪問了根目錄，所以導致資源可以載入但是組件無法渲染的現象。
需要將路由配置改為：
export
default
new
Router
⑨ vue項目打包後，亂碼。部署到本地伺服器，不亂碼，部署到虛擬機linux伺服器亂碼。如何解決
可能是編碼沒設置好，再看看