vue如何配置服务器地址
㈠ vue项目打包部署后请求地址及请求问题
1 首先 vue中 是用的axios 发请求, axios 支持Promise 非常好用, 可以在请求后的.then()中拿到请求回来的数据,像这样
2 请求方式有很多, 如get post put get 又称为 queryParams 所以携带参数后看发的请求是拼串的,像这样
写的时候你可以采取拼串的写法 像 'page = ' + page + '&size=‘size 这种写法,但这种写法过于死板, 当后台要求你穿的参数 是有值时就传 没值时不传 这样就不可以了 因为就算做收集的表单没有数据,也会传一个key过去,这样到后台 后台就会收到一个空值 , 这时候你可以用get请求的另一种方式 params, 这种写法相对灵活 写起来也比较简便 像这样
但当你被要求没值时不传 你就要做一些处理了 比如 把所有要传得数据都放在一个对象中,在发请求前对象做一下处理 删掉没有值得那条属性 比如这样
3 还有就是 发请求的问题了 因为在开发的时候会有跨域问题,我们一般为了方便都会 配置一个代理proxyTable, 但是在打包部署后在服务器上会有问题 因为服务器上没有跨域 请求地址会错, 但是像我上篇帖子中说的那样 每一次打包前都 把请求地址改为服务器地址 那样又很麻烦, 所以我是这么做的，
我在config/dev.en.js中配置了一下 像这样
在config/prod.env.js中这样配置
在组件中发请求时这样写
我认为这样还是比较好用的 如果那里除了问题你需要在 调试工具的network中查看请求地址 看是不是正确 ，不正确改就行了
这些都是比较基础的,但很实用,希望可以帮到你们
㈡ 怎么把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 即可
㈢ vue项目如何部署到服务器
第一步配置 vue.config.js
第二步修改路由，改为 hash模式
第三步文件打包,执行以下，目录中会出现一个dist文件夹，将文件拖到服务器的 root 文件夹中
第四步可以通过域名进行访问 http://www.linlin.run/my-project/index.html#/home
㈣ 通俗易懂讲解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-cli-service关于 output路径设置+服务端口设置
用vue cli创建一个项目
Inside a Vue CLI project, @vue/cli-service installs a binary named vue-cli-service . You can access the binary directly as vue-cli-service in npm scripts, or as **./node_moles/.bin/vue-cli-service **from the terminal.
这里如果我们运行 npm run serve, 实际上运行的就是 vue-cli-service serve
这个源码我们可以在**./node_moles/.bin/vue-cli-service **打开查看
这里我们可以看到运行的过程：
我们可以了解到val的值是
可看到一个service的服务运行，而这个service实际上是：
这是一个类Service的实例对象，而这个类Service的位置在：
@vue > cli-service下文件夹lib下的Service.js文件：
对应的设置publicPath,outputDir.... 设置在
@vue > cli-service下文件夹lib下options.js文件中
服务器端口设置文件：
@vue > cli-service > lib > commands文件夹下的serve.js文件：
㈥ vue如何将项目部署到服务器上并且使外网能够访问到
你的服务器是什么系统啊 ，，，linux LINUX、WINDOWS、NETWARE、UNIX。。
在linux
首先服务器安装node git nginx vue-cli
安装好nginx 用你的公网ip访问就可以看到 下面的页面
这就可以了
还有 用express 部署这个 简单些
㈦ 通过配置文件实现修改vue域名
我们的前端项目一般在打包时就会将服务器域名或者ip配置好，在打包生成的文件直接部署到对应服务器就行了。但是公司的项目要求可以部署私有云或者局域网内，项目的ip地址可能是动态变化的，或者说不同的局域网内ip不是不同的，因此要实现可以让工程人员去修改访问的服务器ip来做到一次打包多处使用的效果。
当然，这样做在我们看来是有一定风险的，会暴露出一些东西，存在一定的危险，同样也提供了一定的便捷性（说白了就是，如果不这样实现，现场售后服务人员会骂娘，因为每个项目都要打包一次，领导呢会感觉，‘ 你个垃圾，就这都不能实现，怎么可能，解释那么多，不就是做不出来，垃圾 ’）。
综上，我这里对公司项目进行了相关实现，其实挺简单的，如下：
1，在根目录下的public目录中添加config.js文件，内容如下：
项目打包的时候会将该文件拷贝到打包文件的根目录中。
2，配置封装的axios，我的axios封装在request.js文件中，这里我节选了需要添加和修改的地方
3，将config.js文件在index.html文件中引入
㈧ vue设置代理
这里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块（这个模块相当于是node.js的一个插件）。
我的 api='/rng'
我的请求地址 ${api}/xxxx/xxx ，请求地址就为 '/rng/xxxx/xxx'
当node服务器 遇到 以 '/rng' 开头的请求 ，就会把 target 字段加上，那么我的请求地址就为 http://45.105.124.130:8081/rng/xxxx/xxx
下面的 pathRewrite 表示的意思是 把 /rng 替换为 空，那么我的请求地址就为 http://45.105.124.130:8081/xxxx/xxx （用在如果你的实际请求地址没有 rng 的情况）
㈨ 《vue》设置代理服务器devServer 的 proxy
在开发环境，vue-cli 会帮我们创建一个开发服务器( http://localhost:8080 )，因此，我们请求后端服务器的时候，可能会出现跨域问题，因为跨域的三要素：域名、端口、协议其一不同。
完整的请求地址：
我的这个地址，里面本身就携带有 api 字段的
利用 vue-cli 中的 devServer 配置
记住，如果你的地址没有类似我那个地址那样，有个 api 作为标识的，你可以手动在地址上加上一些标识，然后利用 pathRewrite 再抹掉即可。
一般不会这么做，这样做意义也不大。因为这么做的话，不单单ajax请求都用的远程，连js、css、图片等其他资源都是远程返回的。。。
用了这个方法，在开发阶段，就不用设置 axios 中的 baseUrl 了，或者这样设置：
然后开发阶段，你的一些ajax的请求的 url 就会匹配到 /api 开头，设置 proxy了
千万不要这么设置：
看似匹配到了，实际上没有生效。。。（我也不知道为什么，知道的同学说一下）
实际上，这里是看不到的。。
因为，F12 这里的这个请求，实际上是发给了 本地的临时服务器，再由本地的服务器发送给远程服务器。
可以这么理解：本地服务器将F12的这个请求拦截了，然后自己偷偷改掉 url，再请求的远程服务器。
正因为本地服务器脱离浏览器的束缚，解决了跨域问题！