网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

vue工程怎么配置用域名访问 vue项目生产调多个域名接口

在vue项目中配置proxy解决跨域问题

1.问题:

红河哈尼网站建设公司创新互联建站,红河哈尼网站设计制作,有大型网站制作公司丰富经验。已为红河哈尼上1000+提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱,请找那个售后服务好的红河哈尼做网站的公司定做!

后端给的接口是:.前端在本地开发中调用该接口跨域。

2.解决方案:

* 在webpack中配置proxy。如下图所示

如上:

1. target是你要代理的域名,必须要加上http。

2. 这里用'/api'代替target里面的地址,组件中调用接口时直接用'/api'代替。比如我要调用'.直接写'/api/news'即可

3. changeOrigin必须为true

* 在页面中请求写法如下:

开心吧。数据终于拿到啦!!!

我们知道,vue2.0项目中的static文件夹存储的是静态资源,可以直接被访问到的,如果我们将mock的数据放入static文件夹,在浏览器中直接访问发现是可以访问到数据的。于是我们在页面将mock数据的请求写成下面这样:

则需要在webpack中做如下配置:

注意这里的http一定不能省略,否则数据请求不到。这样做的好处是在本地开发时mock的接口和线上的接口一致,避免上线前大量改动接口名称。

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

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

在linux

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

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

然后进入到下面的路径

vi default 你会看到nginx的默认配置

默认监听80端口 根路径

把你写好的vue项目 上传到github ,通过git clone 克隆到

服务器

路径下面

然后npm/yarn add/install 安装依赖 然后npm run build

vi 打开html 下面的 index.html 可以看到

nginx默认的html

进入sites-enabled 发现 它里面的 default 来自 sites-available的default

所以需要在 sites-available 新建一个文件 你的项目名命名就可以

在你新建的文件

我在site-available新建的文件是note-admin 映射到 sites-enables

注意路径一定要写全

最后重新加载下 nginx -s reload

打开浏览器 公网ip:端口号  或者 域名访问

这就可以了

还有 用express 部署这个 简单些

通过配置文件实现修改vue域名

我们的前端项目一般在打包时就会将服务器域名或者ip配置好,在打包生成的文件直接部署到对应服务器就行了。但是公司的项目要求可以部署私有云或者局域网内,项目的ip地址可能是动态变化的,或者说不同的局域网内ip不是不同的,因此要实现可以让工程人员去修改访问的服务器ip来做到一次打包多处使用的效果。

当然,这样做在我们看来是有一定风险的,会暴露出一些东西,存在一定的危险,同样也提供了一定的便捷性(说白了就是,如果不这样实现,现场售后服务人员会骂娘,因为每个项目都要打包一次,领导呢会感觉,‘ 你个垃圾,就这都不能实现,怎么可能,解释那么多,不就是做不出来,垃圾 ’)。

综上,我这里对公司项目进行了相关实现,其实挺简单的,如下:

1,在根目录下的public目录中添加config.js文件,内容如下:

项目打包的时候会将该文件拷贝到打包文件的根目录中。

2,配置封装的axios,我的axios封装在request.js文件中,这里我节选了需要添加和修改的地方

3,将config.js文件在index.html文件中引入


分享文章:vue工程怎么配置用域名访问 vue项目生产调多个域名接口
文章转载:http://bjjierui.cn/article/ddeoicd.html

其他资讯