当前位置:首页 » 云服务器 » vue从外部配置文件读取服务器地址

vue从外部配置文件读取服务器地址

发布时间: 2022-09-26 11:58:16

javascript利用vue.js,初始为读取本地或者服务器端 文本文件 .txt

你应该先需要将文件上传到服务器,服务器 读取文件后返回文件内容

② vue前端工程代理之后怎么查看请求接口的真实url呢

这样就可以看到每次请求的真实路径了

③ 求解答关于Vue.config.js文件的详细配置

这里是创建代理服务器访问的时候会通过代理服务器转发,所以就不会出现跨域问题。
这里的配置是以"/api"开头的地址,都通过代理访问,其他的地址则不通过代理,后面的是代理地址。

④ vue如何将项目部署到服务器上并且使外网能够访问到

你的服务器是什么系统啊 ,,,linux LINUX、WINDOWS、NETWARE、UNIX。。

在linux

首先服务器安装node git nginx vue-cli

安装好nginx 用你的公网ip访问就可以看到 下面的页面

这就可以了

还有 用express 部署这个 简单些

⑤ 怎么把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.config.js的配置参数

贴上 官网
vue-cli3 创建的时候并不会自动创建vue.config.js,因为这个是个可选项,所以一般都是需要修改webpack的时候才会自己创建一个vue.config.js
再然后因为vue-cli3内部高度集成了webpack,一般来说使用者不需要再去知道weboack做了什么,所以没有暴露webpack的配置文件,我们可以手动去创建vue.config.js 去修改默认的webpack。注意,只能叫vue.config.js。

publicPath (从 Vue CLI 3.3 起已弃用baseUrl,请使用publicPath)
参考: https://my.oschina.net/u/4446873/blog/4882847

默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.xxx.com/ 。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.xxx.com/my-app/ ,则设置 publicPath 为 /my-app/。

这个值在开发环境下同样生效。如果你想把 开发服务器架设在根路径 ,你可以使用一个条件式的值:

通常开发环境,本地运行都会直接部署在根路径上,publicPath设置为'/',访问地址是你的IP地址。如下是设置成'/app'的效果:

从上面可以得知,静态资源文件都是在app下的,所以在dist下新增添一个app目录,把dist下文件放到app下,相当于一个文件的路径,可以发现项目会正常启动。一般nginx都会配置一个静态资源目录,打包后的文件都会放到这个静态资源目录里面,nginx去做映射,所以publicPath这个属性基本不用改。'/'就行。

结论: publicPath配置成'/aaa/bbb/ccc', 则需在相应的服务器路径中新建aaa>bbb>ccc的文件夹,然后将打包后的文件放进去,就ok啦。

项目中,我会在.env.proction文件中设置一个变量VUE_APP_BASE_URL ,项目打包后告诉相关人员 nginx 路由前缀是什么即可

outputDir

assetsDir

indexPath

filenameHashing

直观效果:当运行npm run build时,
打包后的文件后面都会带一个8位的hash值,那啥是个hash值?

在打包出来的文件名上加上文件内容的hash是目前最常见的有效使用浏览器长缓存的方法,js文件如果有内容更新,hash就会更新,浏览器请求路径变化所以更新缓存,如果js内容不变,hash不变,直接用缓存。(这段话是从别的文章里面参考的)。
将filenameHashing这个值设置为false试试,就不会带那个后缀hash值。

pages

lintOnSave

runtimeCompiler

transpileDependencies

proctionSourceMap

crossorigin (不理解)

integrity

configureWebpack

chainWebpack

Css相关配置

devServer
如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
补充知识
所谓的跨域就是不同源,不满足协议、域名、端口都相同的约定
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 协议不同(https)
http://www.test.com:90/index.html 不同源 端口不同(90)
http://www.demo.com/index.html 不同源 域名不同(demo)
当协议、域名、端口中任意一个不相同时,就是不同源。若不同源之间相互请求资源,就算作跨域
补充知识
反向代理(Reverse Proxy)方式是指以代理服务器来接受网络上的连接请求,然后将请求转发给内部网络上的服务器,并将服务器上得到的结果返回给请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。客户端无需做任何配置。
修改config/index.js /vue.config.js文件(改完之后千万记得要重新 npm run dev)

host 将他的值修改为 0.0.0.0,代表可以访问本机所有的IP地址,让vue项目可通过localhost和IP同时访问。

port 设置端口号

open 是否在第一次编译时是自动打开浏览器

hot 开启为true,启动热重载,自动刷新页面

https

inline

overlay

targe 代理的服务器,也就是api要访问的服务器。
changeOrigin 允许跨域, 为false时,请求头中host仍然是浏览器发送过来的host;如果设置成true:发送请求头中host会设置成target的值
ws 是否代理websocket
pathRewrite 重写 url 的 path 部分

此文记录下来,方便自己遗忘的时候能够快速查阅,如有错误请指出。

参考链接:
https://www.jianshu.com/p/b358a91bdf2d
https://www.jb51.net/article/174200.htm
https://blog.csdn.net/liu_yunzhao/article/details/90520028

这篇文章讲的也很详细 https://blog.csdn.net/guozhangqiang/article/details/87197870

⑦ vue axios怎么访问服务器和端口配置

家庭组同样不需要密码的,设置成家庭网络后,将你要共享的文件右击,设置成家庭组共享就OK了

⑧ vue服务器渲染怎么获取请求的路由地址

用vue服务器给本地服务器发送post请求,就可以获取请求的路由地址

热点内容
修改ons脚本 发布:2024-12-28 12:18:22 浏览:344
华为如何登录非渠道服务器 发布:2024-12-28 12:18:22 浏览:260
安卓炫彩是什么意思 发布:2024-12-28 12:15:28 浏览:957
从哪里换迷你世界密码 发布:2024-12-28 12:10:40 浏览:132
安卓相册误删怎么恢复 发布:2024-12-28 12:09:16 浏览:847
斐讯r1如何修改wifi配置 发布:2024-12-28 12:04:14 浏览:475
pythondict拷贝 发布:2024-12-28 11:52:19 浏览:360
怎么设置共享服务器 发布:2024-12-28 11:52:09 浏览:525
境界之轮回ftp 发布:2024-12-28 11:47:40 浏览:928
迅雷上传最大速度 发布:2024-12-28 11:46:57 浏览:130