vue项目打包步骤

最新推荐文章于 2024-04-01 22:46:42 发布
VIP文章 最新推荐文章于 2024-04-01 22:46:42 发布
阅读量1.4k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w584212179/article/details/88415357
版权

vue项目打包
终端运行命令 npm run build

打包成功的标志与项目的改变，如下图：

点击index.html，通过浏览器运行，F12看Console，出现以下报错，如图： 

那么应该如何修改呢？
具体步骤如下：
1、查看package.js文件的scripts命令
2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件
3、其

最低0.47元/天 解锁文章
春风一慕
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue移动端项目打包成app
01-08
这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看 我就讲解下整个思路和过程 首先项目开发完之后  （我使用的是vue-cli 3.*版本） 在项目文件夹下创建一个 vue.config.js module.exports = {   publicPath: “./”,    //   打包 配置这个可以先本地查看下 效果   productionSourceMap: false     //  调试文件的功能关闭 能加快打包 }; 运行命令行   npm run build 项目文件夹下生成一个 dist文件夹 下面有这些文件  然后打开index.html 本地
vue生成静态html文件_Vue项目打包成一个HTML文件(包含CSS,JS)
weixin_31620365的博客
01-13 7343
关键词：Vue打包成单文件,vue single file,Webpack打包成单文件,webpack single file,有些时候项目比较小，就是一个小工具之类啥的。想打包一个成一个HTML文件包含所有的CSS，JS。这样方便部署和分享，就是一个文件。注意事项{ path: '/foo', component: () => import('./Foo.vue')}路由懒加载不能够正确打...
Vue项目打包部署总结，前端校招面试经验汇总
chatgpt789的博客
04-01 1038
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料且后续会持续更新**
vue打包部署nginx 配置
01-24
vue开发完毕，打包之后上线，传到nginx服务器配置问题解决
vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
weixin_39604092的博客
06-23 699
Ant Design Vue pro 动态路由的实现和打包Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权限 如下图所示配置请求网络接口在api文件夹下login.js中根据自己后台的数据修改路由权限封装规则在store/module/user.js中修改GetInfo方法源js修改后js后台数据示例{"cod...
vue中 把vue页面导出为 html页面
weixin_44168929的博客
12-14 2236
我司要求我把数据融合起来，导出用html的方式展示
项目最终的打包
m0_73089846的博客
10-17 2979
项目打包cdn处理方式简单总结
vue模块单独封装html,vue-cli多模块打包使用详解
weixin_35916518的博客
06-08 757
这次给大家带来vue-cli多模块打包使用详解，vue-cli多模块打包的注意事项有哪些，下面就是实战案例，一起来看一下。场景在实际的项目开发中会出现这样的场景，项目中需要多个模块(单页或者多页应用)配合使用的情况，而vue-cli默认只提供了单入口打包，所以就想到对vue-cli进行扩展实现首先得知道webpack是提供了多入口打包，那就可以从这里开始改造新建build/entry.jscons...
Vue3+Webpack(内嵌)打包HTML的那些坑（已解决）
legendsASD的博客
06-02 494
初始化项目后，可以看到默认给出了三个脚本：},此时好像直接运行如下代码之一就能打包：打包之后的项目结构如下：-dist--css--js直接访问index.html你会发现一片空白！打包失败！
vue模块单独封装html,vue-cli分模块独立打包
weixin_42498585的博客
06-08 516
基用能境战求道，重件开又是正易里是了些之框于vue-cli3多模块独立打求圈分件圈浏第用代是水刚道。的它还包一、目标我们要实作一新求抖直微圈现什么？所谓览页些求时是过解些这确如目前例总站回广随分模块打包，也可以说一个项目一个是能览调不页新代些事几求事都时学下是事功过发,解模块，理解：在sr友技点定理理需果绿大行分近圈术小正不清要c目录下，多个项目共用一些数据方法，但是每个项目有自己独立的入口文件，...
详解vue项目打包步骤
10-17
主要介绍了vue项目打包步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
用Cordova打包Vue项目的方法步骤
10-17
主要介绍了用Cordova打包Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目分环境打包的实现步骤
08-27
主要介绍了Vue项目如何分环境打包,实现方法大概分为六步骤，需要的朋友可以参考下
vue-cli3多项目整合到一个项目中维护打包发布
是一座岛
01-10 4884
一. 概述 二. 方案 三. 实现步骤
Vue或者React项目打包成一个HTML文件(包含CSS,JS,svg,png,ttf,eot,woff等)
知识点沉淀包括不限于前端
03-17 4252
需求 把所有文件打包成一个html文件 项目环境：webpack4 + vue 2 +vue-cli 4 使用vue-cli脚手架打包出来的问件，包括css,fonts（字体图标相关文件）,img(png,svg等),js，html 最终配置完成打包后： https://chastephp.com/js/202003/83.html const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackInlineSo
vue js导出html页面
weixin_44006009的博客
03-05 439
vuejs将需要的内容导出为.html页面。
Vue基础（十）——项目部署
pro1822的博客
09-02 1546
Vue基础（十）——项目部署
vite配置多环境打包
热门推荐
博哥的二进制世界
04-02 1万+
背景 在项目打包的时候，我们通常需要根据环境变量来区分不同的环境，以请求不同的后台接口 vite配置多环境打包 首先看vite官网介绍的方法 那么我们在项目的根目录下创建如下的环境配置文件，以uat为例，在项目根目录下创建.env.uat,并新增环境变量VITE_PROJECT_ENV = ‘uat’,需要注意的是，环境变量必须以VITE开头, package.json中配置uat环境的打包命令，在vite build后加上- -mode uat来区分打包环境 之后在项目中即可通过以下方式获取到配置的
什么是mysql安装配置教程以及学习mysql安装配置教程的意义
最新发布
05-21
mysql安装配置教程
将vue打包成静态文件
06-09
将 Vue.js 应用打包成静态文件，可以方便地将应用部署到服务器上。下面是将 Vue.js 应用打包成静态文件的基本步骤： 1. 安装 Vue CLI Vue CLI 是一个基于 Vue.js 的标准化工具，可以帮助开发者快速搭建 Vue.js 应用。安装 Vue CLI 的命令如下： ``` npm install -g vue-cli ``` 2. 创建项目 使用 Vue CLI 创建一个新的 Vue.js 项目，命令如下： ``` vue init webpack my-project ``` 其中，my-project 是项目名称。 3. 进入项目目录并安装依赖 ``` cd my-project npm install ``` 4. 构建项目 使用以下命令将 Vue.js 应用打包成静态文件： ``` npm run build ``` 执行完命令后，会在项目根目录下生成一个 dist 目录，其中包含了打包后的静态文件。可以将这些文件复制到服务器上，然后通过浏览器访问即可。 需要注意的是，如果 Vue.js 应用中使用了路由功能，打包时需要在 webpack.prod.conf.js 文件中进行配置，例如： ```javascript // webpack.prod.conf.js const config = { // ... build: { // ... // 打包后的静态文件所在的目录 assetsPublicPath: '/', // 是否开启 source map productionSourceMap: true, // 开启 Gzip 压缩 productionGzip: true, productionGzipExtensions: ['js', 'css'], // 配置路由 html: { title: 'My App', // 配置路由 chunks: ['manifest', 'vendor', 'app'] } } } ``` 以上就是将 Vue.js 应用打包成静态文件的基本步骤。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值