‘壹’ 怎么把VUE项目部署到服务器上面
1.使用xshell登录到阿里云服务器。安装nginx(本文安装到/etc下)
[plain]view plain
cd/etc
apt-getupdate
apt-getinstallnginx
2.首先先配置nginx,然后再根据配置文件做下一步操作
打开/etc/nginx/nginx.conf文件
[plain]view plain
vim/etc/nginx/nginx.conf
在nginx.conf中配置如下:
[plain]view plain
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;
}
}
}
接下来就根据配置文件进行下一步工作。配置文件中的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
assetsPublicPath:'/test1/',
如果用到了vue-router,则修改/router/index.js
[javascript]view plain
exportdefaultnewRouter({
base:'/test1/',//添加这行
linkActiveClass:'active',
routes
});
6.nginx配置文件中的location则是针对跨域处理,表示把对/datas的请求转发给http://ip:port,本文中这个http://ip:port下就是需要的数据,例如http://ip:port/seller,在本地项目文件中ajax请求数据的地方如下
[javascript]view plain
consturl='/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
servicenginxstart
9.至此项目部署成功,在浏览器下输入: http://ip/test1/index.html 即可
‘贰’ vue项目打包,路由在数据库里,怎么进行分割
一、使用工具:webpack、react
二、方法步骤:
1、修改你的路由
三、注意事项:[name].js这一点很重要,要是不这样写,就不能打包成对应的路由js。
‘叁’ vue中使用vue i18n如何实现打包后后端修改国际化文件生效
你可以把这部分文件放在static文件夹地下,用的时候指向到这文件路径地下,webpack打包的时候也配下不压缩打包这个目录地下,vue-cli默认集成的webpack配置有这个操作,部署的服务器也可以直接到这个dist/static地下去修改这些文件了
‘肆’ vue项目要部署在服务器上,那么服务器需要安装node.js环境吗
最好是安装一个。
1.如果你仅仅是打包好的vue相机,那么要看服务端使用的是什么语言,如果是node的话,肯定要安装node环境的,但是如果不是node,那么就没有必要了。
2.如果你想在服务端跑vue的项目,也就是在远程端做开发工作,那么肯定是要安装node的,毕竟vue开发环境需要node。
基本上服务端也就这两种需求,node包其实很小,安装一个也不费事,还可以方便开发,我觉得在远程端按一个最好。
‘伍’ 如何打包vue项目加node.js后端到云服务器
在命令行输入npm run build:prod,等待打包完成
项目目录下就会多出一个dist文件夹,里面有index.html文件和static文件夹,
直接上传到服务器上就行了
‘陆’ Vue_cli 服务器运行后URL变成http://localhost:8080/#/
在route/index.js文件中找到routes节点,在该节点上面同级定义
mode: 'history',
这样,路由模式就变成了我们所熟悉的/A/B/C这种形式而没有#在中间;
‘柒’ 怎样配置才能让vuecli build后的静态文件放到子目录也能访问
项目config文件夹里index.js中的assetsPublicPath,默认是/,改成你想设置的子目录名称,比如: /weixin/。
然后还要配置页面内的路由路径就可以了。
‘捌’ vue+framework7中run之后是页面的地址一直就只有localhost:8080,哪位大神可以解决一下吗
设置端口8080啊面加端口号默认80tomcat设置8080所80打端口放
修改tomcat端口号:
修改Server.xml文件8080端口改80
8080Tomcat服务器默认端口号我通修改Tomcat服务器conf目录主配置文件server.xml更改.用记事本打server.xml文件找部:
引用内容:
<Connector port="8080" maxHttpHeaderSize="8192"
maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
enableLookups="false" redirectPort="8443" acceptCount="100"
connectionTimeout="20000" disableUploadTimeout="true" />
其port="8080"更改新端口号即8080改9080等