webpack打包vue项目部署dist文件动态修改serverUrl

最新推荐文章于 2024-03-06 10:10:18 发布
最新推荐文章于 2024-03-06 10:10:18 发布
阅读量889 收藏
点赞数 1
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/likuntao123/article/details/95488418
版权

webpack打包vue项目部署dist文件动态修改serverUrl

  1. 在static文件夹下创建一个js；给window创建一个属性储存serverUrl；在这里插入图片描述
  2. 在index.html中引入上一步创建的js；在这里插入图片描述
  3. 在请求接口文件最上方引入window创建的储存serverUrl的属性。在这里插入图片描述
leo721521
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack搭建vue 项目的步骤
11-27
【webpack搭建Vue项目的步骤】 在开始搭建Vue项目之前，确保你已经安装了必要的工具，包括`webpack`、`vue.js`、`npm`和`nodejs`。由于我们将使用`npm`来管理Vue项目，因此首先需要安装Node.js环境。安装完成后，...
Vue-cli配置打包文件本地使用的教程图解
10-18
从给定的文件内容中，我们可以抽取出关于Vue-cli配置打包文件本地使用的具体步骤和相关知识点。 知识点1：Vue-cli的基本介绍 Vue-cli是一个基于Vue.js进行快速开发的完整系统，它提供了一个官方的脚手架工具来帮助...
安装淘宝npm镜像
qq_38394518的博客
04-05 4401
一、安装淘宝npm镜像 npm set registry https://registry.npm.taobao.org # 注册模块镜像 npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的node源码镜像 npm cache clean --force # 清空缓存 npm install -g cnpm --registry=https://registry.npm.taoba
webpack：webpack动态引入
imagine_tion的博客
11-08 258
webpack动态引入 通过ES6的import（）方法实现，该方法返回一个promise对象
React、Vue项目build打包编译后如何再修改后台请求地址
梦想成为全栈的切图仔
10-19 3139
目打包编译 npm run build 之后成为了普通的静态网页才可上线进行部署及发布。同样这时候我们也已经将代码全部写好了。如果说要改里面的某个值或者修改请求地址我们应该怎么办呢？
webpack打包vue项目后，生成一个可以修改服务器地址的配置文件
qq_35264936的博客
11-11 2952
正常情况如果后端的ip更改了，那么前端就需要重新更改，npm run build 大包后，将dist文件重新上传服务器才可以 解决方法 安装generate-asset-webpack-plugin 这个插件，在webpack.prod.conf.js中去生成configServer.json文件，让其在build的时候生成json文件，然后再使用axios异步获取json，替换url即可 1.先...
vue webapck打包动态修改后台接口地址，或者配置文件
qq_39651981的博客
01-06 2244
这里写自定义目录标题起因解决方案1、使用的插件2、webpack.prod.conf.js里面配置3、在main.js 里面的 起因 最近在做一个项目的时候，由于粗心没有改测试环境的后台接口地址，打包发不上去了服务器。换成正式的地址又要重新打包，觉其繁琐，故阅众多文档，得其一方法。 解决方案 首先安装了【generate-asset-webpack-plugin 】这个插件，然后在webpack....
vue-cli 3.x 修改dist路径的方法
飞翔的熊blabla
03-05 1970
一些牢骚 前端的世界真的太奇妙，更新速度真的跟火箭一样。没有一颗真正热爱它的心，真的很难继续走下去。前段时间 Node 之父 Ryan Dahl 发布新的开源项目 deno，受到了大量的关注。Ryan Dahl直言node是一个失败品，充斥很多bug和设计上的不合理，导致他也无力回天。。。。。天啦撸，可怜我们这种小前端，node还没开始，马上就要结束了。。。。 好的吧，牢骚归牢骚，生活还得继续。生命不息，撸码不止。 webpack4 最近在一个项目中，将vue-cli更新到了最新版的3.x。同时
webpack 中使用vue开发项目
12-21
在现代前端开发中，Vue.js 是一款非常流行的轻量级渐进式框架，而Webpack 则是强大的模块打包工具。将Vue与Webpack 结合使用，能够实现高效、灵活的项目构建。下面我们将深入探讨如何在Webpack 中配置和使用Vue进行...
webpack4手动搭建Vue开发环境实现todoList项目的方法
10-16
在这些配置文件中，会用到一些关键插件和loader，如`vue-loader`处理Vue组件，`babel-loader`进行ES6转译，`style-loader`和`css-loader`处理CSS，`file-loader`和`url-loader`处理静态资源，`html-webpack-plugin`...
vue cli构建的项目中请求代理与项目打包问题
11-29
在Vue CLI构建的项目中，开发者经常会遇到两个关键问题：请求代理和项目打包。这两个环节对于项目的部署和运行至关重要，特别是在处理跨域请求和优化资源加载方面。 首先，我们来探讨请求代理。在开发环境中，由于...
vue项目打包生成外部配置文件修改后端访问地址
山谷里的杂货铺
07-04 3869
前端打包需要向后台问一个接口访问地址，测试环境、生产环境都需要一个地址，每次打包时都要前端切换地址，感觉很麻烦，现在这个方法是打包后，在配置文件中修改地址。1、在public 文件下新建一个config.js文件，并进行编辑 2、找到你请求接口的地方 3、修改Index.html文件，引入config.js文件 4、dist包 只要修改dist包下的config.js文件的url就可以了...
Vue项目部署到IIS服务器及URL拼写错误问题解决
MLAY
11-05 2385
一、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项目打包后直接修改ip地址
weixin_35757191的博客
01-09 2025
在 Vue 项目的配置文件中可以设置 devServer.host 属性来指定开发服务器的主机名。打包后的项目文件中并不包含该配置，所以需要使用其他方式来修改 IP 地址。 一种方法是在本地的 hosts 文件中添加一条映射记录，将域名映射到所需的 IP 地址上。例如，将 localhost 映射到 192.168.1.100： 192.168.1.100 localhost 然后在 Vue 项...
vue打包之后，可以进行修改配置后端地址、端口等信息方法
用心,承载未来
04-12 5502
用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，但是，难道我们只是改个接口地址也要重新打包吗？当然不行了，那就太麻烦了，怎么解决呢？本文推荐俩种方式。
idea Server URL 配置修改
java那些事儿
09-14 1万+
在创建spring boot或者spring cloud项目时，idea默认使用https://start.spring.io作为脚手架，创建完成后手动去添加相关的jar包组合。 通过https://start.aliyun.com 可以直接勾选ali相关的jar包，快速的引入集成。 修改如下位置：如下图： 使用https://start.spring.io时如下图： 使用 时如下图： ...
创建SpringBoot项目时修改Server URL（下载路径）
热门推荐
lyy_sss的博客
08-04 1万+
使用spring initializr创建Springboot项目时，IDEA默认的Server URL为：https://start.spring.io/将Server URL下载路径修改为阿里云镜像仓库：https://start.aliyun.com/1）从中央仓库进行下载，下载速度慢。
SpingBoot Server URL 配置
最新发布
weixin_62140291的博客
03-06 609
默认配置阿里云的配置。
vue修改server路径带dist问题
Alistring的博客
05-29 608
webpack server 开发vue时会发现url会带上dist，例如：http://localhost:8080/dist/index 我们可以打开vue.config.js文件，然后把publicPath的值改成 / 后重新编译重启 npm run build npm run serve Url中的dist已经没有了
在vue2项目配置一个打包速度很快的webpack文件
06-09
要在Vue2项目中配置一个打包速度很快的Webpack文件，可以参考以下步骤： 1. 使用`vue-cli`创建一个Vue2项目： ``` vue create my-project ``` 2. 安装`webpack-merge`插件，用于合并Webpack配置： ``` npm install --save-dev webpack-merge ``` 3. 在项目根目录下创建一个`build`目录，并在其中创建一个名为`webpack.common.js`的文件，用于存放公共的Webpack配置： ``` const path = require('path'); const webpack = require('webpack'); const { VueLoaderPlugin } = require('vue-loader'); module.exports = { entry: { app: './src/main.js' }, output: { path: path.resolve(__dirname, '../dist'), filename: '[name].js' }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': path.resolve(__dirname, '../src') } }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'img/[name].[hash:7].[ext]' } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'fonts/[name].[hash:7].[ext]' } } ] }, plugins: [ new VueLoaderPlugin(), new webpack.optimize.ModuleConcatenationPlugin() ] }; ``` 4. 在`build`目录下创建一个名为`webpack.dev.js`的文件，用于存放开发环境的Webpack配置： ``` const merge = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'development', devtool: 'cheap-module-eval-source-map', devServer: { contentBase: '../dist', hot: true }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] } ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ] }); ``` 5. 在`build`目录下创建一个名为`webpack.prod.js`的文件，用于存放生产环境的Webpack配置： ``` const merge = require('webpack-merge'); const common = require('./webpack.common.js'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = merge(common, { mode: 'production', devtool: 'source-map', optimization: { minimizer: [ new OptimizeCSSAssetsPlugin() ] }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader' ] }, { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ] } ] }, plugins: [ new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: 'css/[name].[hash].css' }) ] }); ``` 6. 修改`package.json`文件，添加两个命令用于启动开发和生产环境的Webpack： ``` "scripts": { "serve": "webpack-dev-server --config build/webpack.dev.js", "build": "webpack --config build/webpack.prod.js" } ``` 7. 运行以下命令启动开发环境的Webpack： ``` npm run serve ``` 运行以下命令构建生产环境的Webpack： ``` npm run build ``` 这样，你就可以在Vue2项目中配置一个打包速度很快的Webpack文件了。其中，我们使用了`webpack-merge`插件来合并公共配置和环境特定的配置，使用了`clean-webpack-plugin`插件来清空打包目录，在生产环境中使用了`mini-css-extract-plugin`插件来提取CSS，使用了`optimize-css-assets-webpack-plugin`插件来优化CSS。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值