-
2021-09-06 14:56:21
## web项目开发完成后打包上线(windows系统)
1. 开发完成后执行 npm run build 进行打包vue项目 得到的是一个dist文件夹(内含html,js,css,fonts等)
2. 上线
上线实际上就是将 打包后的web项目放在 服务器上 用户通过访问服务器来访问web项目
一般前端工程师不用太关心上线问题都是将打包后的代码传递相应的开发人员(运维,后端工程师)
可能会遇见的问题:
问题1:打包后页面空白问题
解决: 打包前在vue.config.js配置文件中添加publicPath:"./"
问题2:请求的问题
解决: 打包前将 axios默认请求地址代理代替为生产请求地址(原api地址)
web端上线后一般前后端项目存放在同一个服务器内 一般无需跨域
## web项目打包成手机app
市场上app分三种:
1. 原生app:安卓app (java语言) ios app(oc语言)
2. 混合开发app(既有原生开发,又有web开发):
安卓app(web(js)+java) ios app(oc+前端)
3. web app:(纯前端)
安卓 ios 都是以web前端开发
打包步骤:
我是一个vsCode编辑器的用户,vsCode无法打包将项目直接打包成移动端app项目 所以我打包一般用HBuilderX
下载地址:https://www.dcloud.io/hbuilderx.html
1. 根据需求下载版本 这里下载了window标准版
2. 第一次使用HBuilder需要在DCloud开发者中心注册一个用户
地址:https://dev.dcloud.net.cn/
3. 登录DCloud开发者中心 创建h5+app应用 记录生成的appid!!!
4. 使用hbuilderx创建一个h5+项目
5. 将我们的打包后的vue项目复制到h5+项目中,注意:将h5+自带的js,css,img,html删除(除了这几个其他都不要删除!)
(使用的时候它会提示下载好多插件 默认下载就ok了)
6. 选中项目 点击顶部导航栏 发行 选择云打包
7. 打包时选择使用测试证书(这里为了避免麻烦就选择公共测试证书)配置打包选项manifest.json 点击打包
8. 打包成功后会自动返回下载链接
更多相关内容 -
vue项目打包上线步骤
2021-03-28 17:24:10项目上线之前, 一定是先打包, 后上线!!! 打包的过程中, 会对代码进行压缩合并, 版本降级, 语法转换等… 1.异步组件配置(路由懒加载) 1.项目大了: 一上来加载所有的组件, 首屏加载就比较慢, 可以配置路由按需加载 ...项目上线之前, 一定是先打包, 后上线!!!
打包的过程中, 会对代码进行压缩合并, 版本降级, 语法转换等…
1.异步组件配置(路由懒加载)
1.项目大了: 一上来加载所有的组件, 首屏加载就比较慢, 可以配置路由按需加载
例子
:把所有需要懒加载的组件由import search from '@/views/layout/search'
改成==>
const Search = () => import('@/views/search')
或者直接在routes中这样写const router = new VueRouter({ routes: [{ path: '/search', component:() => import('@/views/search')}] })
2.修改基本打包配置 vue.config.js
1)需要在根目录新建 vue.config.js , 配置打包后, 相对路径访问资源
(配置打包好的文件(index.html)允许双击本地打开)
// 覆盖默认的webpack配置 module.exports = { publicPath: './', // (主要代码)设置打包文件的相对路径 devServer: { port: 3000, // 设置默认端口 open: true // 设置自动打开浏览器 } }
3.去掉打包后的 console.log()
目标:在开发时可以随意写console.log,只要打包时,自动去掉它们。
(1)安装依赖
yarn add terser-webpack-plugin -D
(2)修改配置文件// 覆盖默认的webpack配置 module.exports = { publicPath: './', // 设置打包文件的相对路径 devServer: { port: 3000,// 设置默认端口 open: true // 自动打开浏览器 }, // configureWebpack 配置是vuecli中提供的一个配置项, 用于对webpack打包做更加精细的控制 configureWebpack: (config) => { // 如果是生产环境, 在打包之后的js中去掉console.log if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true } } }
4.执行最后一步打包文件自动到dist目录
yarn build
-
vue项目打包上线过程以及问题
2020-05-11 11:10:31vue项目打包上线过程以及问题1.打包上线过程1.1如何打包?2.打包期间遇见问题2.1 css,js等静态文件路径错误2.2 favicon图标问题 1.打包上线过程 1.1如何打包? A. 在项目的package.json文件中的build命令可以实现...vue项目打包上线过程以及问题
1.打包上线过程
1.1如何打包?
A. 在项目的package.json文件中的build命令可以实现打包。
B. 在终端执行命令npm run build
,会在项目根目录下生成一个dist文件夹,打开文件夹如图。
打开phpStudy服务,将dist文件夹放至phpStudy文件下的WWW文件夹下即可在本地访问查看。2.打包期间遇见问题
2.1 css,js等静态文件路径错误
A. 更改配置文件。打开项目文件下
config文件夹下的index.js文件
,将其中的build下的assetsPublicPath: '/',
修改为assetsPublicPath: './',
。再次执行npm run build
打包项目,替换之前的dist文件。2.2 favicon图标问题
A. 非vue框架favicon图标问题
将制作好的favicon图标(注意:图标文件名必须为favicon.ico),放在公共文件目录下。
在html页面中引入该图标即可。引入图标代码为:<link rel="icon" href="/favicon.ico" type="image/x-icon" />
图标文件与html文件放置位置如图:
B. Vue项目中favicon图标设置:
在项目搭建成功后,将制作好的favicon文件置于
src/assets/imgs/
文件夹下,并命名为favicon.ico。在build
文件夹下的webpack.dev.conf.js
、webpack.prod.conf.js
文件中的new HtmlWebpackPlugin
中添加以下代码:favicon: 'src/assets/imgs/favicon.ico',
基本文件位置如下:
修改完配置文件最好 npm run dev 一下
如果这样小图标还是没有显示,最好 清空一些缓存
2.3 图片等静态文件路径问题
注意问题所在:
我引入了第三方组件zTree,但是组件中的部分图标位置引用的图片打包之后居然不显示。查看问题居然是路径问题,居然出现重复路径(啥也不说上图看):
解决方案:在
build
文件夹下的utils.js
文件中的generateLoaders
方法中添加如下代码:publicPath: '../../'
-
vue项目打包上线
2021-10-29 19:35:55vue项目打包之后会得到dist目录 该目录下有三个文件,是上传到服务器所需的 如果希望可以双击打开index.html,则需要提前在vue.config.js中配置 { publicPath: './' } 打包优化-路由懒加载 { path: '/...vue项目打包之后会得到dist目录 该目录下有三个文件,是上传到服务器所需的
如果希望可以双击打开index.html,则需要提前在vue.config.js中配置
{ publicPath: './' }
打包优化-路由懒加载
{ path: '/login', component: () => import('@/views/login/index'), hidden: true },
一个路由对一个组件,表示一个页面。懒加载的意思是:只有在路由进入这个页面时,才去加载这个组件对应的资源。
通过在注释中指定webpackChunkName,可以人为设置这个文件的名字。如下是一个示例。
components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue");
-
没设置路由懒加载前:所有页面对应的组件会全部打包到一个.js文件中
-
设置在路由懒加载后:页面对应的组件会全部打包到一个独立.js文件中,而且只有在进入这个路由页面之后才会加载。
打包优化-包大小分析
对开发的应用进行包大小分析
我们可以使用vue-cli本身提供的性能分析工具,对我们开发的所有功能进行打包分析,它的使用非常简单
npm run preview -- --report
这个命令会从我们的入口
main.js
进行依赖分析,分析出各个包的大小,方便我们进行观察和优化,执行完这个命令,我们会看到控制台中如下类似的输出如图所示,方块越大,说明该文件占用的文件越大,文件越大,对于网络带宽和访问速度的要求就越高,这也就是我们优化的方向。
打包优化-去掉console-log
在vue.config.js中,配置:
chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args }) }
webpack配置排除打包
我们是否需要把第三方的库全部打包到自己的项目中呢?
不需要!,我们可以从网络上引入这些包
webpack配置排除打包-打包瘦身
通过配置vue-cli把一些平常不需要用的包排除在打包文件之外。
例如:让
webpack
不打包vue
xlsx
和element
---------------------------------------------------------------------------------
先找到
vue.config.js
, 添加externals
项,具体如下:configureWebpack: { // 配置单页应用程序的页面的标题 // 省略其他.... externals: { /** * externals 对象属性解析。 * 基本格式: * '包名' : '在项目中引入的名字' * */ 'vue': 'Vue', 'element-ui': 'ElementUI', 'xlsx': 'XLSX' }, }
webpack配置排除打包-引用网络资源
做相关配置:通过公共网络资源方式把除在外的包引入在index.html
注意,在开发项目时,文件资源还是可以从本地node_modules中取出,而只有项目上线了,才需要去使用外部资源。此时我们可以使用环境变量来进行区分。具体如下:
在
vue.config.js
文件中:let externals = {} let cdn = { css: [], js: [] } const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境 if (isProduction) { externals = { /** * externals 对象属性解析: * '包名' : '在项目中引入的名字' */ 'vue': 'Vue', 'element-ui': 'ELEMENT', 'xlsx': 'XLSX' } cdn = { css: [ 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表 ], js: [ // vue must at first! 'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs 'https://unpkg.com/element-ui/lib/index.js', // element-ui js 'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx ] } }
webpack配置externals配置项
configureWebpack: { // 配置单页应用程序的页面的标题 name: name, + externals: externals, resolve: { alias: { '@': resolve('src') } } }
注入CDN配置到html模板
在vue.config.js中,设置
chainWebpack(config) { config.plugin('preload').tap(() => [ { rel: 'preload', fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], include: 'initial' } ]) // 省略其他...... // 注入cdn变量 (打包时会执行) config.plugin('html').tap(args => { args[0].cdn = cdn // 配置cdn给插件 return args }) // 省略其他... }
找到
public/index.html
通过配置CDN Config
依次注入 css 和 js。修改head的内容如下:
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= webpackConfig.name %></title> <!-- 引入样式 --> + <% for(var css of htmlWebpackPlugin.options.cdn.css) { %> + <link rel="stylesheet" href="<%=css%>"> + <% } %> <!-- 引入JS --> + <% for(var js of htmlWebpackPlugin.options.cdn.js) { %> + <script src="<%=js%>"></script> + <% } %> </head>
-
-
解决Vue 项目打包后favicon无法正常显示的问题
2020-12-07 03:54:05在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法: 问题分析: 问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问题,... -
vue项目打包之开发环境和部署环境的实现
2020-11-21 05:51:22如前端在开发阶段,接口可能是自己使用 node.js 搭建的服务器,API 返回的也都是假数据,等后台接口开发好后,再切换成后台提供的接口,等测试没有问题,服务端上线后,又要改成正式的接口 手动改动接口,既繁琐又... -
Vue项目上线打包步骤
2022-05-15 11:31:20Vue项目打包上线 -
解决Vue打包上线之后部分CSS不生效的问题
2020-10-16 00:07:42今天小编就为大家分享一篇解决Vue打包上线之后部分CSS不生效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue项目打包优化、上线
2022-02-16 16:47:16首先在项目根目录新建一个vue.config.js文件 打包前必做: module.exports = { publicPath: './', // 静态资源路径(默认/,如果不改打包后会白屏) ...问题: 在vue项目打包之后js,css文件夹中,会自动生成 -
vue项目打包上线的流程
2020-09-24 21:59:27我们在完成项目打包上线的时候,会发现他的文件很大,这个时候我就需要对项目先做一些优化,优化之后在进行打包 一、项目打包之前的优化 1. 通过 externals 加载外部 CDN 资源 默认情况下,通过 import 语法导入的第... -
vue项目打包发布上线方法
2020-10-09 16:29:56vue项目开发完毕后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目。(以下以vue-cli脚手架生成的项目为例) 发布服务器 1、运行打包命令 npm run build 运行后生成dist文件夹,将dist文件夹... -
vue项目打包上线优化
2020-04-21 12:02:20项目打包后在未开启gzip的情况下是86个情求传输 2.8M 开启gzip的情况下传输大小明显减少 速度快了很多 然后分析一下静态资源的大小,排序后如下 发现能优化的点有echarts按需引入,ele现在按需引入已经来不及了,... -
vue.js项目打包上线的图文教程
2021-01-21 11:48:04最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到... -
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2020-10-16 04:42:39主要介绍了解决vue-cli+iview项目打包上线之后图标不显示问题,本文通过两种方法给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 -
解决vue项目打包上线后刷新404
2022-01-04 14:41:33我用nginx部署的,需要再配置前加一句代码 location / { try_files $uri $uri/ /index.html; } 然后重启nginx解决问题。 官网链接:HTML5 History 模式 | Vue Router -
Vue项目打包上线过程踩的坑
2021-06-23 10:17:13一直以为vue项目打包上线很容易,只需要执行“npm run build ”,将生成的代码直接放到服务器就可以了。但是,当自己真正打包上线的时候,就发现远远要比想象的困难,期间会遇到各种问题。此文主要记录一下打包上线... -
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2020-08-27 12:29:44今天很郁闷,遇到这样一个奇葩问题,使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错误,折腾半天才解决好,下面小编把Vue项目webpack打包部署到Tomcat刷新报404错误问题的... -
vue项目打包发布上线
2021-11-03 22:03:19vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-cli脚手架生成的项目为例) 一、运行打包命令 npm run build //一般情况如果不改的话都是build 运行后生成 ... -
从零开始搭建vue移动端项目到上线的步骤
2020-10-17 20:52:31主要介绍了从零开始搭建vue移动端项目到上线的步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解
2021-01-09 01:09:49前言 给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的,我用的 Linux 发行版是 CentOS7.5 有了一个基于 ElementUI 的电商后台管理系统,在...一、Vue 打包的项目如何部署? 1.1 Vue 项目打包 温馨提 -
vue项目打包上线流程以及遇到的问题
2020-09-24 20:49:56vue项目打包上线流程以及遇到的问题 1.打包上线过程 1.1如何打包? 在项目的package.json文件中的build命令可以实现打包。 在终端执行命令npm run build,会在项目根目录下生成一个dist文件夹,打开文件夹如图。 ... -
vue项目打包上线的步骤
2019-05-20 11:54:00utils.js(修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./',修改目的是为了解决js找不到的问题) 使用npm run build 打包... -
vue项目打包上线后点击路由跳转后出现空白
2022-03-30 10:16:40vue项目上线问题 提示:以下是本篇文章正文内容,下面案例可供参考 一、项目上线后点击路由跳转后出现空白 二、解决办法 代码如下(示例): 在router下的index.js中 三、原因 history模式的问题 通过history api... -
vue项目打包优化及上线
2022-05-10 11:37:12vue项目打包优化及上线 -
node-vue项目打包上线-注意事项
2020-07-03 14:03:54打开xsheel, 执行命令 pm2 log , 查看node启动时终端打印的错误消息 如果没问题, 显示的是端口号 访问线上接口 接口服务部署完成 部署前端项目 项目打包 上传到服务器上 使用nginx上线项目 由于项目和api接口所属... -
vue项目打包上线后接口地址报错问题
2018-06-11 10:38:50代理设置的作用是你要访问后端的请求直接发到当前站点,因此你的 api 路径都应该是不含 hostname 的相对路径部署到生产环境时,只要...因此,结论是,只要 proxyTable 设置得好,部署上线不需要做任何改动。...