vue-cli 如何打包上线的方法示例

2024-05-14 16:26:38

为什么80%的码农都做不了架构师？>>>

vue-cli 如何打包上线的方法示例

以vue创建的官方例子为例子，我们在开发环境的时候会 npm run dev ，生成

而想要打包成一份很简单，只需要 npm run build 这个命令

这两种命令的配置文件在config的index.js 一种是build 一种是dev ，而我们想要在本地查看打包后的成果，需要在assetsPublicPath 改变它的路径，具体为什么，可以看index.html引入的文件路径

之后只需要放在服务器上运行就好了。

*常用技巧

1.如果在config -> index.js 中的 build 代码中的 productionSourceMap的值设为false ，打包后文件体积可以减少百分之八十

2.如果设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true，即会使打包生成的index.html中的js和css路径带有？+随机字符串，也就是版本控制

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解vue项目打包后通过百度的BAE发布到网上的流程
vue.js项目打包上线的图文教程
vue 打包后的文件部署到express服务器上的方法
浅谈vue项目如何打包扔向服务器

文章同步发布： https://www.geek-share.com/detail/2736742543.html

转载于:https://my.oschina.net/os2015/blog/2980596

vue-cli 如何打包上线的方法示例相关推荐

vue cli3.0打包上线不同环境
vue cli3.0打包上线不同环境 1. cli3.0支持".env"文件配置,在项目的根目录下配置".env"文件,根据不同的环境命名不同的文件名称,如: ...
cli vue webpack 实战_Vuejs技术栈从CLI到打包上线实战全解析
前言本文是自己vue项目实践中的一些总结,针对Vue2及相关技术栈,实践中版本为2.3.3. 开发前须知 vue-cli 在开发前,我们要至少通读一遍vue官方文档和API(看官方文档是最重要的,胜 ...
linux命令封装sh,shell脚本学习之调用脚本将文件打包zip的方法示例
前言本文主要给大家介绍的是关于调用脚本将文件打包zip的相关资料,分享出来供大家参考学习,下面来一起看看详细的介绍: 最近刚刚接触shell脚本,写了一点简单的练手.这里是用python调用脚本执行 ...
vue后台管理系统打包上线到node
项目准备 1. 配置 alias 别名使用vue-cli开发项目,最大特色是组件化.组件中频繁引用其他组件或插件.我们可以把一些常用的路径定义成简短的名字.方便开发中使用. //加载path模块 c ...
Vue背景图片打包上线后出错问题解决
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: backgroun ...
Vue Cli webpack打包出现Waring ：Critical dependency: the request of a dependency is an expression
错误信息: Waring 写法: let name = require(url); 如下写法,错误消失: let name = require(`${url}`);
vue菜鸟从业记：完成项目最后一公里之真机测试和打包上线
最近我朋友王小闰他们公司的项目开发已经进入收尾阶段,前后端并行开发的差不多了,联调也调过了,上篇文章里也讲到了,所谓联调,就仿佛在说"我也不知道我的接口文档写的对不对,我们验证一下吧?我也不 ...
vue 项目打包上线后 js css 文件找不到
在vue项目完成后打包上线,放到服务器上发现js和css引入不到,页面加载不出来. 在使用vue-cli3以上版本构建的应用时,跟以下方式api有些区别: 如何区分是哪个版本? 可查看项目中是否有co ...
Vue Cli 打包之后静态资源路径不对的解决方法
Vue Cli 打包之后静态资源路径不对的解决方法参考文章: (1)Vue Cli 打包之后静态资源路径不对的解决方法 (2)https://www.cnblogs.com/mengyouyouyo ...

最新文章

热门文章