vue vue-cli webpack打包部署上线前的配置操作，初建vue项目 webpack打包需要注意的配置

最新推荐文章于 2022-07-28 15:08:30 发布
最新推荐文章于 2022-07-28 15:08:30 发布
阅读量811 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42124196/article/details/86510609
版权

第一次全新vue项目，webpack打包给后台前，首先需要修改一下配置文件，很多人都遇到打包后运行一片空白这个问题，这个主要就是因为路径所产生的，所以只要修改config下面的index.js这个配置文件就好：如下图：
在这里插入图片描述
这个时候运行命令行npm run build 打包发给后台部署时，发现css中引用的图片资源找不到
反馈login.vue文件中的引用的背景图片不见了，所写css如下
在这里插入图片描述
而我的“src/assets/”文件夹下有这张图片，打包后路径发生变化这个图片就找不到了，于是解决方法就是利用stackflow，打开“build/utils.js”，增加 publicPath:’…/…/’ 这行就可以了
在这里插入图片描述
如果这个时候不需要你自己部署测试，就可以安心运行命令行npm run build打包给后台了

修炼中的小妖怪
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2.0 项目打包上线，自定义打包配置
m0_53251830的博客
09-18 1834
vue2.0 项目打包上线，自定义打包配置
vue-cli中的webpack打包配置
weixin_34279246的博客
03-03 172
如下： assetsSubDirectory: 'static', assetsPublicPath: '/projectName/', 其中assetsSubDirectory是代表服务器上的实际路径文件夹 assetsPublicPath是代表地址栏访问地址url的二级域名 转载于:https://www.cnblogs.com/windseek/p/8501525...
vue项目打包优化及配置vue.config.js文件（实测有用）
weixin_46824709的博客
07-28 1万+
/是否为生产环境//本地环境是否需要使用cdn//cdn链接//cdn模块名称和模块作用域命名（对应window里面挂载的变量名称）externals{'vue''Vue','vuex''Vuex','axios''axios'},//cdn的css链接css[],//cdn的js链接js['https'https'https'https]}//打包配置文件assetsDir'static','./',https。...
webpack 从入门到上线
大灰狼的小绵羊哥哥的博客
08-22 607
https://segmentfault.com/a/1190000006649986 webpack 是什么 一项技术、一个工具的出现，肯定是为了解决问题的。那么，webpack 是为了解决什么问题？答案是：文件依赖管理。我们在浏览器中的 js 中，不能直接引用其它 js, css 等文件（或说，模块）。而 webpack 就是用来解决这个问题的，让你的项目可以很好地
webpack打包vue请求后台的几种方式
山海一哥的博客
05-30 852
如图所示：第一种是利用wepack配置的代理房方式， 第二种是修改请求的基础路径 第三就是通过base标签来修改
解决vue-cli webpack打包开启Gzip 报错问题
10-16
主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-cli与webpack处理静态资源的方法及webpack打包的坑
12-09
通过Vue-cli进行webpack打包的坑 ...你也许会注意到vue-cli与webpack结合的项目中，我们通常会有两个静态资源的路径：src/assets和static/，他们两者的区别是什么呢？本文主要和大家介绍了vue-cli与
vue-cli webpack2项目打包优化分享
08-28
"Vue-Cli Webpack2 项目打包优化分享" 模块搜索范围优化 在 Vue-Cli Webpack2 项目中，模块搜索范围的优化是非常重要的。默认情况下，Webpack 的 resolve.modules 配置会采用向上递归搜索的方式去寻找模块库（即 ...
vue-cli webpack配置文件分析
12-09
相信vue使用者对vue-cli都不会陌生，甚至可以说，很熟悉了，但对其webpack的配置可能知之甚少吧。 过完年回来后，我接手了公司的新项目。新项目是一个spa。很自然，我就想到了vue-cli脚手架了，当时研究一下它的...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue.js开发中，使用Vue CLI创建的项目通常会依赖Webpack进行构建和打包。Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际...
VUE-CLI webpack 项目打包部署上线
weixin_34082177的博客
10-28 545
很简单不复杂只需要几步1、找到项目的 webpack环境配置的config目录下的index.js文件的assetsPublicPath把"/"改成 "./"得出： build: { env: require('./prod.env'), index: path.resolve(dirname, '../dist/index.html'), ...
Vue项目webpack打包部署到服务器
热门推荐
Dear_Mr的博客
06-05 7万+
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题，而且在经过我的询问，好多人在打包部署的时候都遇到了一些问题，下面就来说下，如何将Vue项目放置在服务器上，这里以Tomcat为例。必须要配置的就是/config/index.js在vue-cli webpack的模板下的/config/index.js，我们可以看到assetsPublicPath这个键，并且这个东西还出现
vue-cli+webpack-simple创建项目访问后台（跨域问题解决）
siriva的博客
10-10 1597
在网上找了很多都是webpack在config目录下的index.js里面代码，这里总结了一个webpack-simple跨域的问题，在webpack.config.js的devServer中配置： devServer：{ port: 8080,//自己项目的端口 host: 'localhost',//自己项目的地址 proxy: { '/api/*': ...
webpack打包用的cdn，速度明显加快，只要10秒不到，全部import需要近一分钟，--最终算是彻底失败-axios
qq_39047764的博客
06-25 6095
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js">&lt...
webpack项目部署步骤
dream_catcher123的博客
12-13 6346
1.本地电脑安装webpack  1.1首先安装node 官网下载安装好 命令行输入node-v 出现如下版本号即成功安装 1.2 安装webpack   //全局安装 命令行输入 npm install webpack -g 2.安装webpack到项目 1.1 webstorm打开项目 或者命令行进入项目目录  1.2 输入命令  npm install --save
Vue项目部署遇到的问题及解决方案
weixin_34117211的博客
01-10 939
写在前面 Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。 hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，hash 的值为 #/hello。特点：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端不会产生什么影响，改变...
关于vue-cli + webpack打包给后台,部署上线
GossipHHH的博客
12-08 6058
1.路径问题 (1).脚手架 + webpack打包必然是npm run build,但是后台用tomcat部署上线的时候,可能会衍生出一点问题,比如,路径问题(这里的路径问题,是因为在项目中,我们使用了绝对路径,这里必须要用相对路径,但是打包后,还是会报错,说是找不到assets文件夹下的各种资源,包括images,css,js,是因为,当初在全局引用的时候,写在了index.html中,安全
vue项目的打包优化
cyz_hd的博客
09-24 1803
1、首先打vue ui控制面板找到项目文件，点击任务进入之后点击start编译和热更新（用于开发环境）运行这个项目 **2、在没有报警告的情况下，去点击build编译并压缩（用于生产环境）进行打包 ** 3、js/chunk-vendors.bb76b22d.js和element-ui的文件过大所以需要对其进行优化 1.通过 vue-cli 3.0 工具生成的项目，默认隐藏了所有 webpack 的配置项，如果程序员有修改 webpack 默认配置的需求，可以在项目根目录中，按需创建 vue.con
vue实现分环境打包步骤（给不同的环境配置相对应的打包命令）
zuo-yiran的博客
06-26 1万+
在新建好的项目中，一般执行npm run build就是打包了，但此时只能打包到一个环境，不同环境需要配置不同的地址，可以手动更改接口的地址，也可以自行配置命令而不需要每次打包进行地址切换，步骤如下： 文件结构如下图： 1）在config文件内新建test.env.js文件： 'use strict' module.exports = { NODE_ENV: '"testing...
vue-cli-webpack:vue-cli 2.9.6版本初始化webpack工程
最新发布
09-07
vue-cli是一个构建Vue.js工程的脚手架工具，帮助开发者快速搭建和管理Vue.js项目。而vue-cli 2.9.6版本是其一个较早的版本，可以使用它来初始化一个基于webpack的Vue.js工程。 使用vue-cli 2.9.6版本初始化webpack...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值