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

最新推荐文章于 2022-04-25 12:52:57 发布

weixin_33881050

最新推荐文章于 2022-04-25 12:52:57 发布

阅读量288

点赞数

文章标签： javascript webpack ViewUI

原文链接：https://my.oschina.net/os2015/blog/2980596

版权

为什么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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33881050

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue-cli4打包过程

m0_64969829的博客

01-13

998

1.在根路径下创建vue.config.js文件 2.vue.config.js文件里需要进行配置 module.exports = { publicPath:'./' , productionSourceMap: false, devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号 hotOnly: false, // 热更新 overlay:

vue-cli 如何打包上线

weixin_33961829的博客

06-09

以vue创建的官方例子为例子，我们在开发环境的时候会 npm run dev ，生成而想要打包成一份很简单，只需要 npm run build 这个命令这两种命令的配置文件在config的index.js 一种是build 一种是dev ，而我们想要在本地查看打包后的成果，需要在assetsPublicPath 改变它的路径，具体为什么，可以看index.html引入的文件...

参与评论您还未登录，请先登录后发表或查看评论

vue-cli —— 项目打包及一些注意事项

aiyizou6070的博客

02-17

299

打包方法： 1.把绝对路径改为相对路径：打开config/index.js 会看到一个build属性，这里就是我们打包的基本配置了。在这里可以修改打包的目录，打包的文件名。最重要的是一定要把绝对目录改为相对目录。即：把assetsPublicPath:'/' 改为assetsPublicPath:'./' 2.在当前工程文件下使用命令：npm run build 进行打包。...

vue-cli+webpack打包配置

weixin_34309543的博客

12-14

134

vue-cli+webpack打包配置一：目录结构： ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev....

vue-cli 打包

Lisunlight的博客

07-28

265

我们都知道vue-cli打包是执行 npm run build 最后生成dist文件，里面包含index.hml和static文件但是生成的文件名总是相同的，在有多个静态页面时难免发生冲突，这时需要我们修改 config/index.js文件，找到build，修改其中的static就行了 const path = require('path') build: { // Templ...

vue-cli+iview项目打包上线之后图标不显示问题及解决方法

10-16

在开发基于Vue.js的项目时，常常会遇到各种问题，特别是在使用像iview这样的UI库进行打包上线后。本文主要关注的是一个常见的问题——图标不显示。这个问题在使用vue-cli和iview构建的项目中尤为突出，主要是由于...

vue cli3.0打包上线静态资源找不到路径的解决操作

10-15

Vue CLI 3.0 是一个基于 Vue.js 的命令行工具...以上就是关于 Vue CLI 3.0 打包静态资源找不到路径问题的解决方法和相关配置知识。确保正确配置 `publicPath` 并理解其他配置项的作用，有助于顺利部署和运行 Vue 项目。

vue项目简单使用运行，打包(自我记录)

world_the_begin的博客

04-26

491

项目示例图：(前提：vue环境已安装好) 2：运行 1）.在cmd命令行进入webapp目录下执行启动命令：npm run dev 启动成功： 2）.在cmd命令行进入webapp目录下执行打包命令：npm run build 成功：会在同目录下生成一个文件夹，文件夹中包含了编译后的代码 ...

（69）Vue-cli 打包与部署

Java田根旺

02-17

1365

一、打包 • 打包就是将 Vue CLI 项目编译为浏览器可识别的文件。执行命令如下： npm run build 二、部署 • 部署指的是将 Vue 项目dist 目录部署到服务器上。 • 安装静态文件服务器命令： • npm install –g serve • 在 dist 下通过 serve 命令部署。 ...

vuecli项目打包

User_XuKang的博客

04-25

7104

有几个问题 1.你知道软件的开发流程吗答：需求获取--需求分析--设计--开发--测试--打包部署--上线 2.为什么要打包答：前端的html，css，js越来越多，打开一个页面发送http也就变得很多，让后端服务器有很大压力，前端不利于性能优化，所以就要打包。把js合并压缩，css合并压缩，图片转换成img-base64 如何打包在vuecli脚手架中直接执行npm run build 不就行了吗确实可以但是是脚手架帮我们做了一些事情。执行完npm run build之后会

Vue-cli 项目打包布署（简单清晰）

qq_35457469的博客

08-27

270

1.项目打包前更改项目config配置打开项目的 config > index.js文件修改build对象的assetsPublicPath: 属性值为 './ ' 如下: 2.对vue-cli项目进行打包输入npm run build命令如下：打包完成没有报错的话会在项目文件夹下生成dist文件夹（需要拷贝布署到服务器的项目包），如下 ...

vue 使用vue-cli打包工具生成基于webpack模板的项目

09-20

836

首先全局安装 vue-cli npm install --global vue-cli PS:前提是电脑装有nodejs和npm工具，自行查找官方网站进行安装生成新项目 vue init webpack 项目名称 PS：项目名称可自己定义也可按默认来安装过程中会给出提示信息有选项的根据自己项目需要来进行选择安装完之后进入项目 cd 项目名称启动项目 npm run ...

vue-cli项目打包app

sunlizhen的专栏

05-29

695

一、准备项目开发完成的web app项目（也可以利用vue-cli脚手架构建vue模板项目），npm run dev可以正常预览的项目二、修改项目中的参数 1、将项目目录下config文件内index.js中assetsPublicPath修改为assetsPublicPath: './' 注意：在这个文件中，有两个assetsPublicPath，一个在dev中，一个在bulid中，我自己试的时候，同时修改，则打包成功的app显示未空白，只修改build中的assetsPublicPat...

vue-cli打包

weixin_30865427的博客

12-10

101

vue有自己的配套工具。而vue-cli可以很方便自动架构vue的东西。当使用vue-cli开发完上线时，可以使用npm run build 简单的打包。打包的文件都在dist里，直接把这个文件里的文件上线即可。打包已经把文件压缩和合并，还有文件名哈希等处理，所以一般默认打包方式会使文件难以阅读，这样也可以防止被别人简单的，阅读，就是不利于浏览器线上排查问题，但这样可以使用前端...

vue-cli打包问题

Curry的博客

01-15

1015

关于npm run build打包问题在项目中使用vue-cli脚手架搭，由于实际项目问题，与自定义安装的项目目录略有差异。自定义安装的项目是：test => src => 源码也就是在test项目下，安装node依赖，进入src下，是项目的源码部分。然后实际项目部分是，test2 => src => vue1、vue2 在src目录下是真正的项目部分，

vue cli 打包上线

Tutu

10-29

252

常见的跨域配置(/config/index.js): proxyTable: { '/api': { target: 'http://192.168.2.139:8080/Mobile/Max', // 接口的域名 // secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true,...

vue-cli项目打包总结

今年第一次改BUG

01-25

172

显示空白页并报错且js引入路径错误打包后的index.html没有引号 element-ui图标不显示问题1附图问题2附图解决1：config>index.js 更改build里面的assetsPublicPath属性为 './'注意：在路由里不能有mode: 'history'，这也是导致空白页原因之一，如需设置请后台配合使用，参考路由配置解决2：build>webpack.prod.conf.js（ctrl+F搜索minify）删除或关闭minify这块内容(关闭方法是给.