- 综合排序
- 最热优先
- 最新优先
- 来自专栏跟着小郑学JAVA
我将Vue项目打包成客户端，万物皆可打包！
最后，将这个H5文件，通过 nodewebkit 封装为一个客户端！ Vue项目，打包后其实也是H5文件，可以一概而论！ 1. 要将此客户端正式使用，需要将整个目录一起打包带走，作为客户端的安装目录。 ， 我都已经把CSDN主页都封装为客户端了，Vue项目还不是了如指掌？ 这个文件里可以配置Vue项目的运行端口、SSL证书、反向代理、负载均衡等等。 具体代码会在最后给出！ html文件夹下，就是放Vue打包后的dist内的文件，完美兼容！ 2.2 Vue项目部署 将Vue打包文件放到html文件夹下后，就可以启动Nginx了！ cmd进入Nginx的目录，运行命令即可！
2.4K30编辑于 2023-08-01 - 来自专栏OY_学习记录
vue 打包部署
一、vue 打包并部署(nginx) 打包 npm run build 默认打包情况如下: 部署 首先需要安装 nignx，可以看我之前的博客：CentOS 7 安装 Nginx 在 nginx.conf error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } 二、nuxt.js 项目打包部署 nuxt.config.js server: { port: 8080, // 端口 host: '0.0.0.0', // 本地 host }, 打包部署 打包 npm run build // 打包 添加站点和文件 在宝塔添加站点，并把以下文件上传到网站根目录下 package.json nuxt.config.js static .nuxt 3.安装依赖 在网站目录下打开终端 npm
1.1K20编辑于 2022-11-23 - 来自专栏不止是前端
Vue 的打包优化之路Vue的打包优化之路
Vue的打包优化之路 场景分析 一个结构简单 依赖蛮多的可视化项目，用到的库有 vue + vue-router + vuex + axios echarts + 全省份地图文件 + 中国地图文件 elementui 先来看看默认没有经过优化的打包分析 默认配置 只做了简单的异步路由加载，各种库均没有按需引用 ? vue-bundle-1.png 这一个地方在体积处理上没有更好的优化办法 ? window.VueRouter) Vue.use(VueRouter) 更改打包策略 通过webpack-chunk-name 合并一些包 const A1 = () => import(/* webpackChunkName 一方面是要考虑打包后的体积，从这个维度来考虑，我们可以通过按需引用以及 CDN。按需引用方便理解效果也比较显著，而使用 CDN 的好处有以下几个方面 抽离出公共包避免每次打包加快打包速度。 以上就是关于打包优化的一点分享
2.7K30发布于 2018-12-24 - 来自专栏码客
Vue打包优化
前言 Vue项目打包后JS文件特别大？ 怎么解决呢？ @2.6.11/vue.min.js"></script> <script src="/librarys/<em>vue</em>-router@3.2.0/<em>vue</em>-router.min.js"></script> path: '/page2', component: () => import('@/views/Page2.vue') } ] 这会使 Page1.vue 和 Page2.vue 分别打包到单独的 使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。 Tree Shaking是指在打包时，只将使用的代码打包进最终的输出文件，未使用的代码被自动剔除，从而减小输出文件的大小。
1.5K10编辑于 2023-04-27 - 来自专栏老怪兽的前端之旅
（二）Vue项目打包
一、打包项目 二、打包完成 打包好最后生成的目录就是上面这种，可以直接部署到服务器上就可以使用了
58920编辑于 2023-02-22 - 来自专栏全栈程序员必看
vue项目打包步骤
vue项目打包 一、终端运行命令 npm run build 二、打包成功的标志与项目的改变，如下图： 3、点击index.html，通过浏览器运行，出现以下报错，如图： 四、那么应该如何修改呢？ 将图片路径修改为绝对路径，至此，打包完成。
1.8K20编辑于 2022-06-28 - 来自专栏程序员成长指北
Vue项目打包部署总结
Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题，内容概览： ? 二、Vue项目打包同步文件到远程服务器 1、 打包 默认情况下，使用vue-cli创建的项目，package.json里的script应该已经配置了build指令，直接执行yarn build 或者 npm 2、 同步到远程服务器 我们使用nginx部署Vue项目，实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹。 此时需要修改nginx配置以及Vue打包配置。 1、 nginx配置 只需要添加一条location规则，分配访问路径和指定访问文件夹。 2、项目配置 为了解决打包后资源路径不对的问题，需要在vue.config.js中配置publicPath，这里有两种配置方式，分别将publicPath配置为./和/test： ?
2.8K70发布于 2020-12-17 - 来自专栏逆锋起笔
Vue 项目打包部署总结
Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。 项目打包同步文件到远程服务器 1、 打包 默认情况下，使用vue-cli创建的项目，package.json里的script应该已经配置了build指令，直接执行yarn build 或者 npm run 2、 同步到远程服务器 我们使用nginx部署Vue项目，实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹。 此时需要修改nginx配置以及Vue打包配置。 1、 nginx配置 只需要添加一条location规则，分配访问路径和指定访问文件夹。 2、项目配置 为了解决打包后资源路径不对的问题，需要在vue.config.js中配置publicPath，这里有两种配置方式，分别将publicPath配置为.
4.6K41发布于 2021-09-08 - 来自专栏Java工程师成长之路
vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包完部署到 import了里面包含module.exports的js，这是两种不同的表达式，作用相同，但不能一起存在；网上的方法大多是加各种插件，像这位仁兄的，等等我就不一一列举了，反正到我这都没用 这里着重说一句，我的vue 项目是基于vue-admin-template改写的，然后有些代码移植了一些以前的h5，在我看来这个问题应该很多人都会遇到，但网上的解决方法要不没用，要不不清不楚，点出了export和import的问题 后记 我学习vue还没有多久，特别对第三方组件和各版本间的区别都不甚了解，如有错误还望指正，有更好的解决办法也请指点下
74710发布于 2019-09-10 - 来自专栏鲸鱼动画
vue打包的基层原理
打包代码：将转换后的代码进行压缩和编译，生成多个静态资源文件，如 js、css、图片等。 输出静态文件：将打包好的静态资源文件输出到指定的目录，以供浏览器获取和加载。 优化打包结果：针对生成的静态资源文件进行优化，主要包括去重、缓存、压缩等操作，提高浏览器加载速度和用户体验。 除了一些基本的使用和自定义构建脚本，我们还可以深入了解一些更深层次的原理，如： Webpack：Vue CLI 依赖 Webpack 进行打包构建，深入了解 Webpack 可以帮助我们更好的理解 Vue CLI 的打包构建过程。 Babel：Vue CLI 默认集成了 Babel，可以使我们在代码中使用最新的 JavaScript 语法和更好的开发体验，进一步了解 Babel 可以帮助我们完成自定义配置、优化打包结果等操作。
54800编辑于 2024-05-24 - 来自专栏小蔚记录
vue ---webpack 打包上线
先来描述一下期间遇到的问题有哪些： 1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。 2、打包好的静态资源均是绝对路径，无法引入进项目，也是 404。 1、项目目录结构 ? 这是打包后的，所以有 dist 文件夹，打包方式：npm run build 2、webpack.config.js ? 3、npm run build 打包后的文件。 npm run build 打包后生成一个 dist 文件夹，这里面的目录 ? 4、如何放到服务器中。 2、解决静态资源失效的问题 这就需要修改我们的 webpack.config.js 中的 publicPath 了，默认的 vue-cli 脚手架环境搭建好后，publicPath 是这样的：
1.5K20发布于 2019-09-11 - 来自专栏杨龙飞前端
使用webpack打包vue工程
vue-cli 为了满足业务需要我这里配置了四套环境，打包的时候可以自己根据不同的业务场景进行打包 首先看整体目录结构： ? index.html是一个单页程序的模版，也会打包到dist里，并且会把打包后的js，css，动态加载到index.html里 代码如下 package.json { "name": "vue-demo ": "^2.0.11", "vue-html-loader": "^1.2.4", "vue-loader": "^11.1.4", "vue-router": "^3.0.1 = require('clean-webpack-plugin');//每次打包之前会清除掉之前的包 let webpack=require("webpack");//打包 let CopyWebpackPlugin $': 'vue/dist/vue.common.js', '@': path.resolve('src') }, }, module: { rules: [
87741发布于 2018-06-21 - 来自专栏前端技术分享|前沿资讯|读书分享
解决vue打包报错UglifyJs
in js/xxxxxx.js from UglifyJs Unexpected token: name «Dom7», expected: punc «;» [js/chunk-3068 产生 在vue ', 'animejs' ], 重新打包 npm run build，完毕。 附 vue-cli@3.x vue.config.js配置混淆压缩代js及去除console(缺少的插件先安装上) // 去除console const UglifyJsPlugin = require , threshold: 10240, minRatio: 0.8, })); // 打包后清除断点和控制台打印 console }, }, sourceMap: false, // 去除打包后生成的
5.4K10发布于 2019-12-30 - 来自专栏杨龙飞前端
使用webpack打包vue工程
vue-cli 为了满足业务需要我这里配置了四套环境，打包的时候可以自己根据不同的业务场景进行打包 首先看整体目录结构： ? index.html是一个单页程序的模版，也会打包到dist里，并且会把打包后的js，css，动态加载到index.html里 代码如下 package.json { "name": "vue-demo ": "^2.0.11", "vue-html-loader": "^1.2.4", "vue-loader": "^11.1.4", "vue-router": "^3.0.1 = require('clean-webpack-plugin');//每次打包之前会清除掉之前的包 let webpack=require("webpack");//打包 let CopyWebpackPlugin $': 'vue/dist/vue.common.js', '@': path.resolve('src') }, }, module: { rules: [
1.2K70发布于 2018-06-15 - 来自专栏计算机编程
【vue随手笔记】Vue cordova 打包配置
./'； 将原来的dist 全部改为www，其他的不需要变化，最后在vue 的webpack目录下： npm build dev // 或 // yarn build dev 最终生成的www目录 在cordova create yourBuildLibrary 此目录下，将之前vue目录下生成好的www目录替换掉本目录下的www 目录，最后 cordova
1K10发布于 2018-09-12 - 来自专栏全栈程序员必看
VUE打包图片加载失败问题
问题描述，使用VUE-CLI打包后，出现图片无法显示情况。这里可能存在两种情况： 静态资源CSS中使用图片作为背景图片使用时。 在JS中生成图片标签后，再设置图片路径时。 当你吃着火锅唱着歌，一路npm-run-dev都相安无事的时候，打包完事后，发现突然图片显示异常了！ ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', //注意: 此处根据路径, 自动更改 fallback: 'vue-style-loader ' }) } else { return ['vue-style-loader'].concat(loaders) } } 对于第二种情况，需要修改src的获取方式
2.6K50编辑于 2022-08-22 - 来自专栏谭广健的专栏
将Webpack打包Vue源码还原
直到遇到一个新的项目，对方竟然用vue并且用webpack进行服务端打包。。直接在服务端是无法进行修改处理。怎么办？ webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。
7.1K31发布于 2021-09-25 VUE——打包时如何指定环境
前言 vue项目打包时如何指定环境,比如生产和测试 步骤 其实很简单,只需要我们在编译的时候指定参数就可以了,可以查看下我们的build目录下的build.js文件中的内容，就是在我们npm run build
50410编辑于 2024-08-16- 来自专栏网络技术联盟站
如何通过 Vue CLI 打包 Vue3 项目？
在 Vue.js 开发中，将项目部署到生产环境通常需要进行打包。 图片第一部分：安装 Vue CLI在开始打包 Vue3 项目之前，我们需要确保已经安装了 Vue CLI。 创建完成后，进入项目目录： cd my-vue-app第三部分：项目打包现在，我们已经准备好了打包 Vue3 项目。Vue CLI 提供了一个命令来进行项目打包。 按照以下步骤进行打包：在终端中，运行以下命令进行项目打包： npm run build 这将触发 Vue CLI 执行项目打包操作。等待打包过程完成。 结语通过本文的介绍，您应该已经了解了如何通过 Vue CLI 打包 Vue3 项目。请记住，打包是部署 Vue3 项目到生产环境的必要步骤，并且您可以通过优化打包结果来提高项目的性能和加载速度。
1.1K30编辑于 2023-07-06 - 来自专栏云原生系列
前端vue+docker打包发布
Vue生成1. 初始化工程选择一个文件夹npm init vue@latest然后roject name: … <your-project-name>✔ Add TypeScript? … No / Yes✔ Add Vue Router for Single Page Application development? Docker打包思路是本地用nginx包装让外部可以来调用，开放9030端口1. 打包镜像以及跑容器docker build -t vue:1.0 -f Dockerfile .docker run --name=vue_1.0 -d -p 9030:80 vue:1.0三. 用来反向代理出最后的容器图片docker exec -it 682987294b1a /bin/bashcd /etc/nginx/conf.d/vim default.conf图片location /中配置的是vue1.0
2.4K31编辑于 2022-09-15
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号