VUE打包后配置配置文件修改请求url方法及webpack打包的文件生成同名文件方法

最新推荐文章于 2023-12-29 09:28:53 发布
原创 最新推荐文章于 2023-12-29 09:28:53 发布 · 3.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在项目中设置全局环境变量，并使用Webpack进行高效打包。通过在static目录下创建config.js文件，定义BASE_URL，可在.vue文件中通过axios访问。调整webpack.prod.conf.js中的hash设置，可优化打包后的文件结构。

1.在static目录下新建config.js文件

window.g = {
    BASE_URL: "https://localhost:111"
}

在index.html文件中引入此js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 引入配置文件-->
    <script type=text/javascript src="/static/config.js"></script>
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

.vue文件中访问方法

 axios.get(window.g.BASE_URL+'/api/Default/GetAllCustomerName?keyword='+query)

打包出来的文件目录
在这里插入图片描述
2.目录结构在这里插入图片描述
打开build下的webpack.prod.conf.js,删掉所有[某某hash],如图我注释掉了，打包好后将生成app.js,app.css等在这里插入图片描述

Vue项目build打包编译后如何再修改后台请求地址
Macao7_W的博客
09-01 1033
因为在public文件夹下的项目是不参与编译打包的，所以我们在public下进行配置请求地址，就可以不用每次修改后台地址再打包了。
vue技巧（十）全局配置使用（打包后可修改配置文件）
Interest1_wyt的博客
06-13 3089
vue js或json全局配置使用，打包后保持配置文件不变，支持打包后修改配置文件内容
Vue项目打包后动态获取自定义变量
weixin_34129696的博客
05-10 1388
1 前言 1.1 业务场景 一般使用 Vue 项目连接后端请求，使用的 axios import axios from 'axios' export const CMSAPI = axios.create({ baseURL: "http://localhost:8080", timeout: 30000, }); 复制代码axios 中的 baseURL 一般是访问地址 Vue 项目打...
webpack依据不同的文件类型配置不同的域名
xiaoxiaofly的博客
10-22 567
问题背景，有时候需要将打包结果根据不同的文件类型配置不同的publicPath 比如js、css、fonts、png单独配置不同的域名 module.exports = { // publicPath: '/', publicPath: process.env.NODE_ENV === 'production' ? `//j1${cdnPrev}` : '/', pluginOptions: { publicPath: { css: pro.
web项目的html路径,【Web前端问题】Vue项目中index.html中的相对路径，打包后未变成绝对路径如何修改...
weixin_35695434的博客
06-16 1015
问题描述在Vue项目中，index.html 我使用了script标签引入了一个在static目录下的文件这是项目目录，我的js在static/js/xxxx.js在dev情况下是可以使用的，但是在打包到dist后，dist目中的index.html,还是这样的话，我已经该怎么修复呢回答：在webpack.base.conf.js中resolve: {extensions: ['.js', '.v...
Vue第五天学习总结——Vue全家桶之前端工程化(模块化相关规范、webpack、Vue单文件组件、Vue脚手架、组件库——Element-UI 的基本使用)
weixin_52819925的博客
08-27 1098
(一) 模块化相关规范 1. 模块化概述 传统开发模式的主要问题 命名冲突：多个js文件中的同名变量会冲突 文件依赖：js文件之间无法相互引用问题 通过模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 2. 浏览器模块化规范 AMD Require.js (http://www.requirejs.cn/) CMD Se
Vue - 5 - 模块化 - commonJS、ES6-Modules、webpack、工程目录、（处理：css、less、图片、vue、搭建服务器）
LawssssCat的博客
02-29 1195
文章目录# 为什么需要模块化# 模块化？组件化？# 匿名函数的解决方案 # 为什么需要模块化 回顾下 JavaScript 原始功能 在网页开发的早期， js 制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。 那个时候的代码是怎么写的呢？直接将代码写在 <script> 标签中即可 随着 ajax 异步请求的出现，慢慢形成了前后端的分离 客户端需要...
webpack5处理图片资源，文件名等
qq_46199553的博客
11-22 968
过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。
前端工程化实战 - Webpack 打包
时光海的博客
10-31 887
前端工程化实战 - Webpack 打包
放在vue项目中的xlsx文件下载下来之后是空的
最新发布
10-11
引用[1]是关于引入xlsx库和本地上传展示，引用[2]是关于下载本地xlsx文件的配置（涉及webpack配置），引用[3]是关于通过接口下载文件流并创建下载链接的方法，引用[4]似乎不完整，但提到了下载时可能涉及的字段。...
webpack + vue 打包生成公共配置文件（域名） 方便动态修改
01-19
需求原因       原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能通过不同的指令打包来切换域名，每天都在测试域名和正式域名来回摩擦，后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好，于是就有了这篇文章。 第一步 安装插件      npm install --save-dev generate-asset-webpack-plugin 第二步 新建配置文件 在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件 {ProdUrl:http://text.com} 第三步 引入generate-ass
关于vue项目使用webpack打包后dist下的index.html打开后空白的问题
wyblm521的博客
10-05 889
由于vue-cli3之后不需要手动配置webpack.config.js文件,因此可以这样进行vue项目的打包 如你生成的dist文件下的index.html为空白文件，即vue.config.js中的publicpath：’/'和上图中的不一样，修改一样后即可解决此问题 此外执行命令时，若package.json中无build指令，则执行npm run build:prod生成dist文件。 ...
webpack打包批量替换路径（string-replace-webpack-plugin插件）
牟云飞的博客
12-29 2262
是一个用于在 webpack 打包后的文件中替换字符串的插件。它可以用于将特定字符串替换为其他字符串，例如将敏感信息从源代码中移除或对特定文本进行本地化处理。比如文件的html、css、js中的路径地址想批量更改一下/image/111.jpg改为111.jpg文件太多挨个改太多，通过string-replace-webpack-plugin在打包的时候批量替换。
Vue打开动态html页面,解决vue 项目使用webpack打包后，直接打开dist文件夹下的index.html页面空白的问题...
weixin_42506911的博客
06-03 1058
解决vue 项目使用webpack打包后，直接打开dist文件夹下的index.html页面空白的问题2020年07月11日|萬仟网IT编程 |我要评论问题描述vue项目完成后，输入npm run build命令，会生成dist文件，本地打开dist/index.html，一般页面为空，或者报错找不到css和js文件，则需要更改一些路径参数，改成...
Vue的打包问题及一些webpack问题
小小程序猿洋的博客
05-16 631
资源找不到的问题 在vue npm run build 打包的时候 assetsPublicPath: '/', // 编译发布上线路径的根目录，可配置为资源服务器域名或 CDN 域名 我个人理解的就是在哪里引用资源（static） 因为打包后只有index.html 和static文件 所以引用的资源都在static里面 如果是"/" 引用时就是 /static 如果是"....
Vue项目部署到IIS服务器及URL拼写错误问题解决
MLAY
11-05 2747
一、Vue项目部署到IIS服务器 1、终端执行命令：npm run build，对项目进行打包，打包完成过后，项目目录新增dist文件夹 2、打开IIS服务器，添加网站，选择打包好的dist文件夹。设置如下： 3、部署完成，浏览该项目。 二、URL拼写错误问题解决 浏览网站出现下面错误： 解决办法： 1、下载安装所需模块 url-rewrite：https://www.iis.net/downloads/microsoft/url-rewrite application-r
Vue.js中实现接口替换的方法
ByteWhisper的博客
09-28 598
有时候，在开发过程中，我们需要在不同环境之间切换接口地址，例如在开发环境和生产环境中使用不同的接口地址。使用上述方法，我们可以方便地在Vue.js项目中实现接口的替换。无论是使用环境变量还是自定义插件，都可以根据需要在不同环境中切换接口地址，提高开发效率。在这些工具中，我们可以使用环境变量来配置不同环境下的接口地址。我们可以创建一个自定义的插件，在插件中定义接口地址，并将其注入到Vue实例中。这样，在不同环境中，Vue.js会根据当前环境加载对应的环境变量文件，从而使用不同的接口地址。
打包后修改环境路径
m0_61103773的博客
06-07 394
替换为this.baseURL。
服务器项目配置被篡改,vue项目如何配置才能使得打包时忽略url配置文件，切换到测试以及线上环境时修改url配置文件内容即可切换服务器...
weixin_42382398的博客
08-05 569
1.在项目文件的static文件夹中创建一个config.json文件，用于存放项目所使用的url配置项2.在项目文件的src文件夹中创建一个geturl.js文件，写一个函数getConfigUrl(),用于获取config.json文件中的json对象3.在main.js文件中，将getConfigUrl()函数从geturl.js文件引入到根实例中，即可在项目中使用4.在build文件夹的w...
深入解析Vue 2.0脚手架Webpack配置文件
本文将深入解析Vue 2.0脚手架中的Webpack配置，带你了解在vue-cli#2.0中至关重要的部分。首先，我们需要明确，Vue CLI是一个用于快速构建Vue.js项目的工具，它简化了配置过程，尤其是webpack的配置管理。Webpack是一...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值