vuecli3打包后怎么部署,vuecli3打包配置

　　本文主要介绍vue-cli3.0项目打包后如何修改access后端地址。有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

打包修改访问后端地址

问题

　　本来访问后台的地址是写在代码里的，但是这种情况下，打包后就不能修改了。只能在代码中修改，然后重新打包。

解决

　　在vue-cli3.0之前，带static的项目目录不会打包，但是vue-cli3.0项目目录中没有static文件夹，但是有一个public文件夹不会打包(所以一些没有npm的插件或者包要放在public目录中)，所以在public目录下创建一个js文件，命名为config.js

　　在添加代码中，将BASE_URL定义为访问后台接口的地址。

　　向index.html中的文件添加代码。

　　脚本类型=text/javascript src=。/config . js /脚本

　　最后，在需要的地方引用。

　　window.global _ config。基本网址

　　这样配置之后，无论是打包之后还是开发过程中，都可以正常访问后台。

　　执行命令包项目

　　npm运行构建

　　可以在packed dist目录下的config.js文件中更改后端接口地址~ ~ ~

项目打包后直接修改ip地址

　　最近项目遇到私有化部署，ip地址不唯一。如果每次修改ip地址，然后打包重新部署，就太繁琐了。一个程序员怎么能做这么累的工作？这篇文章是记录如何使ip地址可配置，使其无需重新构建代码即可再次生效。

实现方案

　　经过一番研究，最终确定了三个方案：

1. 方案一

　　在与src同级的静态文件夹或公共文件夹(element-admin template)下创建一个新的config.js文件，在其中配置生产环境的地址，并将其引入index.html。方法可行，但地址可能被恶意修改，不安全。但是，这对于一般项目来说是没问题的。

　　(实测可行。打包后直接修改config.js中的地址，刷新页面即可生效。)

　　第一步：我使用了element-admin的模板，所以我在public中生成了一个config.js文件。

　　常量VUE应用程序URL={

　　base URL:“http://192 . 168 . 1 . 19:8080”，

　　}

　　第二步：在index.html中直接引入config.js文件(将其添加到body标签之上)。

　　脚本src=。/config . js /脚本

　　步骤3:在封装请求的request.js页面上赋值。

　　let baseURL

　　if(process . ENV . node _ ENV=== production ){

　　baseURL=VUE应用程序URL

　　Sessionstorage . setitem( c _ base URL ，vue _ app _ URL . base URL)//保存session storage，如果它可以在其他地方使用。

　　}否则{

　　BASE URL=process . env . vue _ APP _ BASE _ API

　　}

　　const service=axios.create({

　　baseURL: baseURL，

　　超时：50000

　　})

2. 方案二

　　使用在线插件generate-asset-webpack-plugin，通过一系列配置生成一堆静态文件。这个方法是通过请求json文件来获取地址。安全性有一定的保证，但是真的很麻烦。

　　(我只看了实现原理，没有耐心实验是不行的(~ _，~)。有兴趣的话可以自己学。)

3. 方案三

　　新的json文件是公开创建的，地址是通过请求json文件获得的。

　　(以上两种方案的组合版本理论上是可以的，但是这个没有经过测试，所以不确定效果好不好。)

　　{

　　base URL : http://192 . 168 . 1 . 19:8080

　　}

　　从“axios”导入axios

　　let baseURL

　　if(process . ENV . node _ ENV== production ){

　　http.get(。/config . JSON’)。然后((res)={

　　session storage . setitem( base URL ，res.data.baseURL)

　　baseURL=res.data.baseURL

　　})