使用vue-cli构建项目打包命令及注意事项

最新推荐文章于 2024-07-16 16:20:26 发布
最新推荐文章于 2024-07-16 16:20:26 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： 前端技术 文章标签： 前端vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42138029/article/details/80680176
版权

打包命令：npm run build

执行后会生成dist文件夹，里面包含css,js,img,index.html等文件，点击index.html文件即可查看项目。

 

注意事项：

1、在打包之前，需要将文件中config文件夹下的index.js中的

原来为 / 改成 ./ 之后再npm run build，否则打开index.html会为空白页。

2、另外在打包时项目中需要先安装整个依赖node_modules，否则将会打包失败，报错。

3、打包时找不到woff字体文件

 

在build下的utils第40行增加publicPath:"../../"

凹凸moon
关注
专栏目录
Vue - cli3 项目打包方法及注意事项（cli 其他版本可进行参考）
王佳斌
07-02 703
前言 注意：基于 vue-cli3 构建的项目。 项目开发完毕，首先进行以下几步配置，然后便可运行命令打包。 一、第一步 如果有则不需要创建，直接进行配置即可。 首先需要在根目录创建 vue.config.js ，写入以下代码： // vue cli3.3 版本之前使用 module.exports = { baseUrl:"/" } // vue cli3.3 版本之后使用 module.exports = { publicPath:"./" // 或者 // publi
vue项目npm run build打包dist文件及打包后空白的解决方法
qq_52126119的博客
11-15 1万+
要想将vue的移动端项目打包成手机的app软件apk格式，首先要将项目打包出dist文件。若空白查看一下配置，可能是配置有错误，（本人用的情况一配置空白，换成了情况二的配置，成功解决！！）
vue项目打包命令_前端开发：Vue项目打包步骤
weixin_32413177的博客
01-30 2万+
在前端开发过程中，开发项目编码是必须的能力，但是开发之后的上线也是不可缺少的技能。而且现在的前端开发用的打包都是借助于三方插件来完成的，本篇博文就来分享一下前端项目打包的流程步骤，本案例以Vue来介绍，其他前端技术的打包步骤这里不再过多介绍。 Vue项目打包一般是基于webpack+vue-cli下的操作，具体的操作命令也很简单，只需要在终端里面输入打包命令：npm run build ...
vue 之webpack 的打包原理和用法
最新发布
weixin_53159238的博客
07-16 1533
如上图中间蓝色的部分就是webpack,它会将左边各种文件打包成右侧html能够解析的文件比较重要的两个概念打包和模块。
通过CLI(命令行)进行打包
WaterSprite_ct的博客
11-23 898
通过CLI(命令行)进行打包
Vue打包并发布项目
qq_43842093的博客
05-11 1万+
一、 打包vue项目步骤： 1、对当前vue项目进行打包的命令如下： npm run build 2、打包完成，会输出Build complete并且在vue项目中会生成一个名字为dist的打包文件。如下图： 二、 使用静态服务器工具包发布打包的vue项目 1、首先安装全局的serve，如下图： 命令如下：serve + 打包文件名 serve dist 效果图如下： 3、使用浏览器访问上图中输出的地址，效果图如下： 三、 使用动态 web 服务器(tomcat)发布打包的vue项目
vue项目配置不同环境打包指令（vue-cli2、vue-cli3项目）
xilejie的博客
04-11 4438
根据指令打包不同环境的dist包。
使用vue-cli打包过程中的步骤以及问题的解决
11-28
1、打包命令是npm run build，这个命令实际上是在package.json中，scripts中build所对应的命令； 2、创建一个prod.server.js，这个文件不是必须的，这个文件的用处是在打包完毕之后，通过启动node.js本地服务来访问打包完成的静态文件，不需要的同学可以忽略这一点， prod.server.js文件代码示例： let express = require('express'); let config = require('./config/index'); // let axios = require('axios'); let app = exp
vue-cli项目打包
qq_43121828的博客
09-09 215
1.打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js（config/index.js）文件 2.其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: ‘/’,然后修改为assetsPublicPath: ‘./’,即“/”前加点 ...
vue-cli项目打包app
sunlizhen的专栏
05-29 689
一、准备项目 开发完成的web app项目（也可以利用vue-cli脚手架构建vue模板项目），npm run dev可以正常预览的项目 二、修改项目中的参数 1、将项目目录下config文件内index.js中assetsPublicPath修改为assetsPublicPath: './' 注意：在这个文件中，有两个assetsPublicPath，一个在dev中，一个在bulid中，我自己试的时候，同时修改，则打包成功的app显示未空白，只修改build中的assetsPublicPat...
vue-cli3.0配置及使用注意事项详解
10-18
Vue-cli3.0是一个基于Vue.js进行快速开发的完整系统，它提供了从创建项目、配置到构建的全套解决方案。以下是从给定文件内容中提炼出的知识点： 1. Vue-cli3.0配置详解 在使用Vue-cli3.0创建项目时，系统提供了默认...
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
10-14
在使用Vue CLI和Webpack构建的项目中，遇到打包部署到服务器后ttf字体文件找不到的问题，通常是由于资源路径配置不正确导致的。本文将详细解释这个问题的产生原因以及解决步骤。 1. **问题分析** 当Vue CLI项目...
解决vue cli使用typescript后打包巨慢的问题
10-16
在使用Vue CLI结合TypeScript开发项目时，开发者可能会遇到打包速度非常缓慢的问题。本文详细介绍了如何解决该问题，以及在Vue项目中优化TypeScript打包速度的方法。针对这一问题，首先需要了解Vue CLI是如何配置ts-...
vue-cli4.x环境搭建
01-08
创建一个新的 Vue.js 项目，使用 Vue CLI 提供的 `vue create` 命令。例如，创建一个名为 "my-project" 的项目： ``` vue create my-project ``` 在创建过程中，CLI 会提示你选择预设选项或自定义配置。如果...
【vue】npm run build打包路径问题
Y.Cheng的博客
06-08 4万+
直接插入主体 额不 主题 我的vue脚手架目录结构如下 有个config文件夹，在index.js中有两个方法一个开发dev,一个生产build。 　 - dev： 是我们的开发环境，资源使用绝对路径，所以可以正常看到背景图片 - build： 是我们的生产环境，资源使用相对路径，所以会报错 一：Vue打包js,css等的路径问题 我们打包自然要设置build中的代码了。下...
npm run build生产环境打包部署
热门推荐
喔易
05-09 9万+
1、npm run build打包成功后，会在dist目录下生成index.html和static文件夹，将dist下所有文件复制到你需要的目录下。2、配置nginx，以下为简单配置:server {        listen 8011  default;        server_name  localhost;        location / {#配置网站根目录，即index.html...
vue项目webpack打包css顺序异常导致警告问题解决 couldn‘t fulfill desired order of chunk group(s)
乐夫天命兮的博客
03-23 2956
看到这个报错真的是一头雾水 后来发现是ExtractTextWebpackPlugin插件编译提示的预警： 解决问题先看的懂预警提示信息： 明白了这句话后就知道了是组件顺序加载出现问题： 提示后边的“，”号代表正确的有几个不正确的有几个； 然后全局搜索引用组件顺序，调整后执行提示消失。 ...
vue-cli4打包过程
m0_64969829的博客
01-13 988
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命令打包发布组件
qq_27216791的博客
05-20 2182
功能描述 把某个系统中的几个vue页面需要供给多个系统使用，所以需要对公共的vue页面进行打包发布到npm仓库，其他系统工程通过npm install导入进行使用 工程示例 |-- src | |-- App.vue # 根组件 | |-- main.js # 入口js文件 | |-- api # 接口请求api | |-- assets
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值