vue-cli打包后怎么修改服务器地址实践有效

前言：公司vue项目使用 npm run build 打包生成dist文件部署后，当需要修改服务器端地址时候就又需要重新配置url并打包部署，为简化部署测试工作，想实现通过修改服务器地址的配置文件来实现修改打包后的项目服务器地址。

项目基于vue-cli2搭建测试，下面是实现步骤：

1、在static文件夹下创建配置文件 serverconfig.json，服务器地址信息

{"ApiUrl":"http://localhost:8082/"
}

注意static和assets路径下文件引用区分：

static/ 目录下的文件并不会被 Webpack 处理：它们会直接被复制到最终目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。任何放在 static/ 中文件需要以绝对路径的形式引用：/static/[filename]。

assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。

可以通过webpack+vue自定义路径别名找到文件的位置，如找到static下文件

export default {name: 'HelloWorld',data () {return {baseURL:getUrl(),svg:require('../assets/svg/circle_red.svg'), //assets下静态资源会被webpack处理解析为模块依赖，使用相对路径//因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。svg2:{"src":'/static/circle_red.svg'},//static/ 目录下的文件并不会被Webpack处理,使用绝对路径形式，如/static/[filename]。//通过webpack+vue自定义路径别名可以找到文件的位置，如找到static下文件svg3:require('@static/circle_red.svg'), }},}

2、修改 config/index.js 文件的build打包配置，防止出现404文件错误

防止出现上图错误，如下图将assetsPublicPath对象修改成 ' ./ '

3、在main.js 文件中配置如下：

import axios from 'axios'Vue.prototype.$axios = axios;let startApp=function(){Vue.prototype.$axios.get("static/serverconfig.json").then((response)=>{//用一个全局字段保存ApiUrl 也可以用sessionStorage存储console.log(response.data.ApiUrl);Vue.prototype.ApiUrl=response.data.ApiUrl;new Vue({el: '#app',router,components: {App},template: '<App/>'})}).catch((error)=>{console.log(error)});
} startApp();

注意：

防止请求与页面渲染之间的时间差异化导致值获取不到报 undefined错误，将 new Vue()实例化放在请求里执行，且先定义 Vue.prototype.ApiUrl，再实例化new Vue()

4、在 .vue 或 js 文件中调用

<script>
import Vue from 'vue'
function getUrl(){return Vue.prototype.ApiUrl;
}export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App',baseURL:getUrl(),}},methods:{},mounted:function() {console.log(this.baseURL);}
}
</script>

5、npm run build 打包后将项目包dist部署到tomcat服务器上，在dist/static/serverconfig.json文件修改url后刷新浏览器页面即可

vue-cli打包后怎么修改服务器地址实践有效相关推荐

vue项目打包后直接修改ip地址
在 Vue 项目的配置文件中可以设置 devServer.host 属性来指定开发服务器的主机名.打包后的项目文件中并不包含该配置,所以需要使用其他方式来修改 IP 地址. 一种方法是在本地的 hos ...
怎么修改APP的服务器,安装app后怎么修改服务器地址
安装app后怎么修改服务器地址内容精选换一换在移动设备上正确安装APP后,就可以通过APP登录NetEco服务器. 华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考. ...
反编译后怎么修改服务器地址,反编译后怎么修改服务器地址
反编译后怎么修改服务器地址内容精选换一换业务接入DDoS高防后,经过高防转发的流量到服务端之后真实源IP将被隐藏,在业务应用开发中,通常需要获取客户端真实的IP地址.例如,投票系统为了防止刷票, ...
vue中使用pdf.js插件打包后不显示插件及打包后动态修改接口地址
最近写了一个项目需要在线展示pdf 实现方法是下载该插件并解压放到 static文件夹中地址:http://mozilla.github.io/pdf.js/ 我在项目中使用iframe嵌套的方式 ...
vue项目打包后部署到服务器(超详细步骤)
耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作一 ,打包项目 vs ...
VUE cli打包后打开白屏解决办法
使用vue cli脚手架可以快速搭建开发环境,但是开发完以后想要在本地浏览器打开的时候却是白屏的.What the F ???? 一番折腾终于找到解决办法. 项目环境版本: vue 2.5 vue-c ...
vue项目接口地址暴露_vue项目打包后可以配置接口地址的方法
因为项目测试的需要,我需要给测试人员一个项目的测试环境版本和生产环境版本,两个版本的区别就是请求的接口地址不一样而已,一开始,我是在webpack配置了不同的命令,让测试去打包,比如:使用npm ru ...
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
vue项目打包后修改接口地址
vue项目打包后修改接口地址我们在做vue项目时,总会遇到开发时用的测试地址和项目上线时用到的接口地址不同,再就是项目上线后,后期需要更改接口地址的情况.然而,如果没有一个配置文件,后期更换起来就只 ...

vue-cli打包后怎么修改服务器地址实践有效

vue-cli打包后怎么修改服务器地址实践有效相关推荐

最新文章

热门文章