vue打包项目

最新推荐文章于 2023-06-21 16:51:33 发布
最新推荐文章于 2023-06-21 16:51:33 发布
阅读量203 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshichengce/article/details/98211048
版权

（1）项目打包执行cnpm run build指令，进行代码丑化
在这里插入图片描述
（2）打包成功后在根目录下会多出一个dist文件夹
在这里插入图片描述
（3）点击index.html，通过浏览器运行，出现以下报错，如图：
在这里插入图片描述
（4）方案
修改config/index.js，在build开发配置下的assetsPublicPath的路径前加.
在这里插入图片描述
打包项目-JS图片路径问题

mode模式一般默认hash即可
图片使用注意：
（1）template中使用…/…/static/xxx或者static/xxx
（2）script的data数据里使用static/xxx或者./static/xxx
（3）style的css背景图使用…/…/static/xxx

ChengCe
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
项目：Vue.js高仿饿了吗外卖APP（一）
兔子juan的博客
07-24 7507
使用Vue.js作为项目的技术栈！这是目前最火的MVVM框架（之一），轻量、简洁、高效、数据驱动、组件化的优点，被大家称为“简单却不失优雅，小巧而不乏大匠”！ 开发此项目需要的前置知识： HTML CSS JavaScript 还需要es6(目前很重要)...
vue 项目打包优化
qq_43541326的博客
04-29 170
每当我们写完一个项目，要线上的话 都要对进行一些优化 代码规范 1：一般我们开发一个项目都要遵循一个代码规范，以便后期交流方便 这时候我们使用 vue里面的 eslint 就是一个不错的选择， 移除项目打包中的consol 2：我们再开发完一个项目之后 有许多的consolo，这些多多少少都会占用空间 1. babel-plugin-transform-remove-console 方法** ...
webpack打包进行丑化压缩遇到（TypeError: Cannot read property 'compilation' of undefined）问题
想搞全栈的前端
07-26 684
问题 在使用vue官方推荐打包插件UglifyjsWebpackPlugin对webpack打包时遇到TypeError: Cannot read property ‘compilation’ of undefined 解决办法 很明显，这是node一些包的版本对应不上的问题 将项目中的该包升级或者降级到1.0.0版本 npm i uglifyjs-webpack-plugin@1.0.0 --...
【WebPack】引入Vue；认识Plugin；使用uglifyjs丑化JS代码；搭建本地服务器；生产开发环境配置文件的抽离
热门推荐
寒泉
02-03 6万+
Vue实战 - 配套源码 npm install --save-dev vue-loader vue-template-compiler 可能会报错如下： 以上报错解决方式：修改版本^13.0.0，然后重新npm install 认识Plugin 使用npm run dev运行服务器 ...
Vue2屎山代码大盘点
最新发布
weixin_45821809的博客
06-21 373
Vue2屎山代码大盘点
解决vue打包项目后刷新404的问题
08-27
下面小编就为大家整理了一篇解决vue打包项目后刷新404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈vue项目打包优化策略
10-17
主要介绍了浅谈vue项目打包优化策略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案是为了提升项目的性能和加载速度，尤其对于大型或者复杂的 Vue 应用来说，优化显得尤为重要。以下是一些关键的优化措施： 1. **不生成.map文件**： .map 文件主要用于在开发环境中进行...
vue移动端项目打包成app
01-08
这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看 我就讲解下整个思路和过程 首先项目开发完之后 （我使用的是vue-cli 3.*版本） 在项目文件夹下创建一个 vue.config.js module.exports ...
webpack学习笔记02 性能优化
好好学习天天向上
05-12 236
文章目录webpack学习笔记02面试题性能优化 webpack学习笔记02 面试题 webpack内容比较杂乱，先整理面试题，在学习的时候可以抓住重点。 Webpack的打包过程？ Webpack的 vendor 和model 有什么区别吗？ Webpack 的 loader的作用？ Webpack loader 和 plugin 的区别 Webpack 做过哪些优化手段？有哪些优化手段？ Webpack 插件的执行顺序（加载机制）？ Webpack中怎么实现组件异步加载? Webpack如何配置压
Vue中 乍一看让人懵逼的代码
qq_36913208的博客
02-26 330
render: h => h(App) 出自 vue cli 构建的 main.js 文件中，首先看看各个版本的写法： components: { App } // vue1.0的写法 render: h => h(App) // vue2.0的写法 再来看看官方解释：接收一个方法，作为第一参数，这是关键点 查资料得出，ES6语法，表示 Vue 实例选项对象的 render...
Vue中的webpack详解
Chil_G的博客
09-13 8515
内容概述 目录 认识webpack webpack的安装#webpack%E7%9A%84%E5%AE%89%E8%A3%85 webpack的起步 webpack的配置 loader的使用 webpack中配置Vue plugin的使用 搭建本地服务器 认识webpack 什么是webpack？ 我们先看看官方的解释： At its core, webpack is a static module bundler for modern JavaScript application.
这可能是vue-cli最全的解析了……
weixin_34128411的博客
06-19 1308
题言： 相信很多vue新手，都像我一样，只是知道可以用vue-cli直接生成一个vue项目的架构，并不明白，他究竟是怎么运行的，现在我们一起来研究一下。。。 一、安装vue-cli，相信你既然会用到vue-cli，自然node环境是OK的，直接命令行下安装 npm install -g vue-cli 复制代码 二、使用vue-cli创建vue项目 用法： vue init <templat...
JS代码如何不被别人看到？
White feathe 的博客
07-17 1万+
JS代码如何不被别人看到　　　　 js方法禁止查看源文件、防止复制、禁止右键、总结 　　　　 　　　　　　 1、锁定右键将网页中的换为如下代码即可：<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.em
如何使用gulp丑化压缩代码
weixin_30502157的博客
08-15 114
使用gulp自动化工具，且基于node.js来实现代码压缩混淆 1、安装node.js 进入node.js中文官网，下载安装包，安装后需要设置环境变量，在变量名path的变量值后加入C:\Program Files\nodejs\ 2、安装好后，可以通过cmd进行操作 首先分别执行node -v，npm -v测试安装是否成功，出现版本号，则成功 3、...
uglyJS 压缩丑化介绍
MichaelAn的博客
01-08 3881
uglyJS 功能：丑化 JS 文件，有效减小 js 文件大小； 基本使用 0、环境配置 如果有 es6 代码，假设已经安装了 babel 并可以成功将ES6转换成ES5代码。(项目没有使用webpack进行打包) 1、安装库 npm install uglify-js --save-dev 2、修改配置 package.json 改成下面的配置 "scripts": { "clean": ...
如何gulp压缩,丑化代码
weixin_33884611的博客
12-19 196
为什么使用 最近在迭代公司的项目,发现项目有如下缺点: 代码没有压缩,js文件，内存大，放在服务器上占空间； 源代码没有混淆或者丑化处理，本公司的程序员写出来的代码和高质量逻辑容易被其他公司的程序员盗用； js,css 文件数量多，浏览器加载起来会“手忙脚乱”和“生气”。 这个小项目使用gulp构建工具写的，所以很自然用gulp下的一...
vue-cli3混淆、压缩打包（另附问题解决方法）
莫奈小姐姐的博客
11-05 3105
前言 欸，其实这回也没什么前言了，就是之前的代码需要做混淆之后压缩打包。 使用这个插件 插件地址 https://github.com/webpack-contrib/terser-webpack-plugin 安装命令 npm install terser-webpack-plugin --save-dev 配置修改 const TerserPlugin = require('terser-webpack-plugin') // module.exports 中配置，可加参数，详见github
vue打包项目成app
06-01
将 Vue.js 应用程序打包成移动应用程序需要使用一些工具和框架。以下是一些常用的将 Vue.js 应用程序打包成移动应用程序的工具和框架： 1. Cordova：Cordova 是一个开源的移动应用程序开发框架，它可以将 Web 应用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值