vue-cli3.0项目打包后如何修改访问后端地址

2024-12-01 22:40:19

打包修改访问后端地址

问题

原本是将访问后台的地址写在代码里面，但是这样的话打包之后就不能修改了，只能在代码里面修改，然后重新打包

解决

在vue-cli3.0之前的版本，项目目录有static不会被打包，而在vue-cli3.0项目目录没有static文件夹，但是有public文件夹是不会被打包（因此有些没有npm的插件或者包应该放在public目录下），所以在public目录下创建一个js文件，命名为config.js

在里面添加代码，定义BASE_URL为要访问后台接口的地址

在index.html里面添加代码该文件

<script type="text/javascript" src="./config.js"></script>

最后在需要的地方引用它

window.global_config.BASE_URL

这样配置完了无论是在打包后还是在开发中都可以正常访问后台

执行命令打包项目

npm run build

在打包好的dist，目录下的config.js文件里面就可以改后端接口地址啦~~~~

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

最近的项目遇到了私有化部署，ip地址不是唯一的，如果每次都修改完ip地址再打包再重新部署，实在是太繁琐了，身为程序员怎么能干这么累的活￣へ￣，这篇文章就是记录一下如何把ip地址变成可配置的，不用再重新构建代码就能重新生效。

实现方案

经过一番调研，最终确定了3个方案：

1. 方案一

在与src同级的static文件夹或者是public文件夹（element-admin模板）下新建config.js文件，在里面配置生产环境地址，在index.html引入。方法可行，但是可能会被恶意修改地址，不安全。不过一般的项目用这个就行。

（实测可行，打包后直接修改config.js里的地址，刷新页面即可生效）

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

const VUE_APP_URL = {
    baseUrl: 'http://192.168.1.19:8080',
}

第二步：在index.html直接引入config.js文件（加在 body 标签上方）

<script src="./config.js"></script>

第三步：在封装请求的request.js页面赋值

let baseURL
if (process.env.NODE_ENV === 'production') {
  baseURL = VUE_APP_URL.baseUrl
  sessionStorage.setItem('c_baseUrl',VUE_APP_URL.baseUrl) //如果其他地方能用到就存sessionStorage
} else {
  baseURL = process.env.VUE_APP_BASE_API
}
const service = axios.create({
  baseURL: baseURL,
  timeout: 50000
})

2. 方案二

使用网上的插件generate-asset-webpack-plugin，通过一系列配置生成一堆静态文件。这种方法是用请求json文件获取地址的方法。安全有一定保证，不过属实麻烦。

（我只看了实现原理，没有耐心试验管不管用(￣_,￣ )，感兴趣可以自行了解）

3. 方案三

在public新建的是json文件，通过请求json文件获取地址。

（上面两种方案的结合版，理论可以，不过这种也没试验，不确定好不好用）

{
    'baseUrl': 'http://192.168.1.19:8080'
}

import axios from 'axios'
let baseURL
if(process.env.NODE_ENV=='production'){
    http.get('./config.json').then((res)=>{
        sessionStorage.setItem('baseURL',res.data.baseURL)
        baseURL=res.data.baseURL
    })
}else{
    baseURL = process.env.VUE_APP_BASE_API
}
const service = axios.create({
  baseURL: baseURL,
  timeout: 50000
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

Vue3项目打包后部署到服务器请求不到后台接口解决方法

本地开发没问题能正常请求到接口,部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况对比了本地的页面可以发现是remote address出了问题. 经过查询得知:Remote Address代表的是当前HTTP请求的远程地址,即HTTP请求的源地址. 我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的,而部署到服务器后相当于换了个环境( ip地址和端口已经改变 ),此时proxy代理就出错了. 解决方法: 地址错误了,那就
vue-cli 项目打包完成后运行文件路径报错问题

本文介绍了vue-cli 项目打包完成后运行文件路径报错问题,做个笔记,也分享给大家. 刚新建的vue-cli项目,同事说要打包一版进行测试,打包完成后放在tomcat上发现路径报错问题. 百度了一下,怀疑是build里面没有定义路径问题,度友提供了解决方案: 找到config文件夹下的index.js文件,修改路径代码找到build对象,修改属性assetsPublicPath为 './' 但是由于vue-cli项目中已经没有config文件夹,需要在根目录下创建vue.config.js
vue-cli3项目打包后自动化部署到服务器的方法

一.安装 scp2 npm install scp2 --save-dev 二.写好脚本例如 upload.js (下面任选一个即可) 位置和 package.json平级即可. 简略版 'use strict' // 引入scp2 var client = require('scp2'); client.scp('./dist/', { // 本地打包文件的位置 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址 "port": 'XX',
如何修改Vue打包后文件的接口地址配置的方法

1.背景常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的.如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效.那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢? 2.可选方案进行了调研后,网上介绍的方案有2种: 1)在static上设置一个config.js,把配置的参数设置成 window 下的
vue-cli3.0项目打包后如何修改访问后端地址

目录打包修改访问后端地址问题解决项目打包后直接修改ip地址实现方案 1. 方案一 2. 方案二 3. 方案三打包修改访问后端地址问题原本是将访问后台的地址写在代码里面,但是这样的话打包之后就不能修改了,只能在代码里面修改,然后重新打包解决在vue-cli3.0之前的版本,项目目录有static不会被打包,而在vue-cli3.0项目目录没有static文件夹,但是有public文件夹是不会被打包(因此有些没有npm的插件或者包应该放在public目录下),所以在public目
Vue项目打包后可修改基础接口地址配置的具体操作

目录一.目的二.具体操作实现总结一.目的最近在学习或工作中遇到,把 Vue 前端项目打包后,要求可以再次修改请求后端接口的基础地址.平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里. 这样子打包后如果要改图里红框处的地址,要么去打包编译后的文件堆里一个个搜索(如果项目不小的话,这文件堆可不少...),找到后直接改,要么在源码里改完后重新再打包部署,这两种做法都显得有些麻烦,且维护性也不好. 所以本文用一种较好的方案来解决以上问题,通过创
vue cli3.0打包上线静态资源找不到路径的解决操作

项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require
vue项目打包后上传至GitHub并实现github-pages的预览

vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件打开项目根目录config下的index.js文件,进行如下修改: 即
解决vue+elementui项目打包后样式变化问题

博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染. 代码如下: main.js // The Vue build version to load with the `import
vue项目打包后请求地址错误/打包后跨域操作

vue项目 npm run dev时跨域请求正常,但是打包后请求地址就错误(请求地址不存在),请求不到数据. 在vue项目中常用的是proxyTable代理跨域,这个用起来比较方便,但是当项目打包后就遇到这个问题了. 解决办法如下: 打开config文件夹下的index.js文件,添加以下代码 pathRewrite: { '^api':'https://*****.com' //填写需要跨域的地址 } 2.配置开发环境地址,就是config文件夹下的dev.env.js文件,添加以下代码: '
如何解决vue项目打包后文件过大问题

目录为什么打包后文件过大? 如何快速解决 1.路由懒加载[使用es6提案的import()方式] 2.CDN引入为什么打包后文件过大? 移动app项目,使用vue-cli脚手架搭建,UI主要运用的是Muse-UI,开发过程中为满足需求,混入Element-UI部分组件,加之团队开发,前端不止一人参与,在没有统一规范约束的情况下,编码风格和方式都很迥异和…混乱,以致依赖过多,打包时webpack把所有的库都打包在一起,所以vendor.js文件和app.js文件很大,最后出现进入首个页面时会长
vue项目打包后部署到服务器的详细步骤

耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作一 ,打包项目 vscode下载链接: 链接: https://pan.baidu.com/s/1PD-Sts-e2V17wSs5FvrLmg 提取码: 2jbf 1 , vscode打开你的vue项目 -- > 点终端- > 新终端- >输入npm run build 按回车 , 显示正在打包..稍等一会 2
vue 项目打包通过命令修改 vue-router 模式修改 API 接口前缀

需求说明: 在开发 vue 项目的过程中遇到的需求是要把 api 接口前缀暴露在命令行,通过 npm run build apiUrl 即可修改接口入口,用于从 docker 部署到不同的测试服务器上,其次是路由模式的问题,部署到测试服务器上的需要是 history 模式,但是产品是用 electron + vue 开发的桌面应用,electron 硬性要求 vue-router 的路由模式是 hash 模式,所以命令行需新增一个配置项 mode ,mode 可选值有 history .hash
解决vue项目打包后提示图片文件路径错误的问题

vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build