① 为什么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服务器乱码。如何解决
可能是编码没设置好，再看看