精华内容
下载资源
问答
  • 项目打包上线

    2021-02-25 18:46:42
    (1)打开config文件夹中的index.js文件,将build中的改为。 (2)输入命令 npm run build

    (1)打开config文件夹中的index.js文件,将build中的改为

    (2)输入命令 npm run build 生成dist文件夹

     

     

    展开全文
  • vue项目打包上线

    2019-03-21 09:54:40
    vue项目开发完毕后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目。(以下以vue-cli脚手架生成的项目为例) 发布服务器 1、运行打包命令 npm run build 复制代码运行后生成dist文件夹,将dist...

    vue项目开发完毕后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目。(以下以vue-cli脚手架生成的项目为例)

    发布服务器

    1、运行打包命令

    npm run build
    复制代码

    运行后生成dist文件夹,将dist文件夹发布在服务器中,over搞定

    本地预览打包后的项目

    运行打包命令后,可以看到命令行提示以下信息 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.

    意思是说需要运行在服务器上,运行以下命令配置本地服务

    npm install -g http-server // 该命令只需执行一次, 全局安装
    复制代码

    安装完毕后,更改congif/index.js文件中build下的assetsPublicPath属性值为"./"(默认为/)

    好啦,双击index.html开启本地预览~

    将config -> index.js 中的build下的productionSourceMap属性值设为false,打包后文件体积可以减少百分之八十

    转载于:https://juejin.im/post/5c9354f55188252d7a5c520f

    展开全文
  • 下面小编就为大家分享一篇vue.js项目打包上线的图文教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue项目打包上线流程

    2020-09-25 07:59:23
    我们在完成项目打包上线的时候,会发现他的文件很大,这个时候我就需要对项目先做一些优化,优化之后在进行打包 一、项目打包之前的优化 1. 通过 externals 加载外部 CDN 资源 默认情况下,通过 import 语法导入的...

    作用:

    我们在完成项目打包上线的时候,会发现他的文件很大,这个时候我就需要对项目先做一些优化,优化之后在进行打包

    一、项目打包之前的优化

    1. 通过 externals 加载外部 CDN 资源

    默认情况下,通过 import 语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功
    后,单文件体积过大的问题。
    为了解决上述问题,可以通过 webpack 的 externals 节点,来配置并加载外部的 CDN 资源。凡是声明在
    externals 中的第三方依赖包,都不会被打包。

    config.set('externals', {
     vue: 'Vue', 'vue-router': 'VueRouter',
    axios: 'axios',
    lodash: '_',
    echarts: 'echarts',
    nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor'
    })
    
    

    同时,需要在 public/index.html 文件的头部,添加如下的 CDN 资源引用

    <!-- nprogress 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <!--同时,需要在 public/index.html 文件的头部,添加如下的 CDN 资源引用-->
    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
    

    2.通过 CDN 优化 ElementUI 的打包
    虽然在开发阶段,我们启用了 element-ui 组件的按需加载,尽可能的减少了打包的体积,但是那些被按需加
    载的组件,还是占用了较大的文件体积。此时,我们可以将 element-ui 中的组件,也通过 CDN 的形式来加
    载,这样能够进一步减小打包后的文件体积。

    具体操作流程如下:
    ① 在 main-prod.js 中,注释掉 element-ui 按需加载的代码
    ② 在 index.html 的头部区域中,通过 CDN 加载 element-ui 的 js 和 css 样式

    <!-- element-ui 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" />
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    
    

    3、路由懒加载
    当打包构建项目时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成
    不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

    具体需要 3 步:

    ① 安装 @babel/plugin-syntax-dynamic-import 包。
    ② 在 babel.config.js 配置文件中声明该插件。
    ③ 将路由改为按需加载的形式,示例代码如下

    const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
    const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
    const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')
    

    二、项目打包上线的流程

    1、在项目文件夹下运行npm run build
    2、我们会发现在原来的项目文件夹中多出了一个dist文件夹,这个文件夹就是我们要放到线上的内容
    我们把这个dist文件夹给到后端的工作人员,后端的工作人员,后端的工作人员就会把这个文件挂载到后端服务器上
    现在我们把dist文件夹里的内容放在htdocs文件夹中

    展开全文
  • 我们在完成项目打包上线的时候,会发现他的文件很大,这个时候我就需要对项目先做一些优化,优化之后在进行打包 一、项目打包之前的优化 1. 通过 externals 加载外部 CDN 资源 默认情况下,通过 import 语法导入的第...

    我们在完成项目打包上线的时候,会发现他的文件很大,这个时候我就需要对项目先做一些优化,优化之后在进行打包

    一、项目打包之前的优化

    1. 通过 externals 加载外部 CDN 资源
    默认情况下,通过 import 语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功
    后,单文件体积过大的问题。
    为了解决上述问题,可以通过 webpack 的 externals 节点,来配置并加载外部的 CDN 资源。凡是声明在
    externals 中的第三方依赖包,都不会被打包。

    config.set('externals', {
     vue: 'Vue', 'vue-router': 'VueRouter',
    axios: 'axios',
    lodash: '_',
    echarts: 'echarts',
    nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor'
    })
    

    同时,需要在 public/index.html 文件的头部,添加如下的 CDN 资源引用

    <!-- nprogress 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <!--同时,需要在 public/index.html 文件的头部,添加如下的 CDN 资源引用-->
    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
    

    2.通过 CDN 优化 ElementUI 的打包
    虽然在开发阶段,我们启用了 element-ui 组件的按需加载,尽可能的减少了打包的体积,但是那些被按需加
    载的组件,还是占用了较大的文件体积。此时,我们可以将 element-ui 中的组件,也通过 CDN 的形式来加
    载,这样能够进一步减小打包后的文件体积。

    具体操作流程如下:
    ① 在 main-prod.js 中,注释掉 element-ui 按需加载的代码
    ② 在 index.html 的头部区域中,通过 CDN 加载 element-ui 的 js 和 css 样式

    <!-- element-ui 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" />
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    

    3、路由懒加载
    当打包构建项目时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成
    不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
    具体需要 3 步:
    ① 安装 @babel/plugin-syntax-dynamic-import 包。
    ② 在 babel.config.js 配置文件中声明该插件。
    ③ 将路由改为按需加载的形式,示例代码如下

    const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
    const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
    const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')
    

    二、项目打包上线的流程

    1、在项目文件夹下运行npm run build
    2、我们会发现在原来的项目文件夹中多出了一个dist文件夹,这个文件夹就是我们要放到线上的内 容
    我们把这个dist文件夹给到后端的工作人员,后端的工作人员,后端的工作人员就会把这个文件挂载到后端服务器上
    现在我们把dist文件夹里的内容放在htdocs文件夹中

    展开全文
  • vue项目打包上线过程以及问题1.打包上线过程1.1如何打包?2.打包期间遇见问题2.1 css,js等静态文件路径错误2.2 favicon图标问题 1.打包上线过程 1.1如何打包? A. 在项目的package.json文件中的build命令可以实现...
  • iOS9项目打包上线

    2015-11-18 17:20:41
    [置顶] iOS9项目打包上线(个人记录,2015年11月11日)  分类: 小技术2015-11-11 17:21 60人阅读 评论(1) 收藏 举报 iOS9XCODE 7打包上线发布应用 页首声明: 题外话: 原本是昨天上传的,结果...
  • vue项目打包上线流程以及遇到的问题 1.打包上线过程 1.1如何打包? 在项目的package.json文件中的build命令可以实现打包。 在终端执行命令npm run build,会在项目根目录下生成一个dist文件夹,打开文件夹如图。 ...
  • 主要介绍了解决vue-cli+iview项目打包上线之后图标不显示问题,本文通过两种方法给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue项目笔记(31)-项目打包上线

    千次阅读 2018-08-20 10:13:03
    项目打包上线 1、在项目终端中运行以下命令 npm run build 2、此后,项目会增加dist文件夹,该目录代码就是最终要上线的代码。 3、复制dist文件夹,交于后台开发人员,将代码放到后端的服务器上。 4、放置在...
  • vue+elementUI项目打包上线注意的问题

    千次阅读 2019-04-09 11:43:21
    vue+elementUI项目打包上线注意问题一:路由不跳转二:背景图片background不显示找不到文件 一:路由不跳转 在项目打包之前,放在本地的跳转都是完美的,但是打包之后就会出现路由无法跳转,并且报错。在router 中的...
  • React项目打包上线

    2020-04-21 20:58:48
    完成React项目的开发之后,需要将前后端进行联调,而这一过程便要将我们已经开发完成的项目进行打包 1.打包 在React项目的主文件夹下 使用命令: npm run build 2.启动静态服务器 依旧在该文件夹下使用命令: npm...
  • eclipse项目打包上线

    2019-10-28 09:09:16
    一、将项目打包成war包。(这里以eclipse如何打包为例) 项目(右键)——>Export——>War file(Web)——>选择war包保存路径——>Finished。 二、发布到Tomcat上。 2.1 解压tomcat 2.2 将打包好的war包...
  • 一、vue-cli项目打包上线 1.首先用Xshell连接服务器 2.在本地找到自己的完成的项目,运行 npm run build命令,可以看到该项目下有一个dist的文件夹: 3.将打包好的的文件放到服务器中,我放在opt新建的vue-...
  • vue项目打包上线优化与部署—踩坑 网上有很多优化手段,部分报错部分有效,所用脚手架不同配置也不同,所以我在此对vuecli3做一个踩坑以后的部署总结 用到的优化手段包括: 1.按需加载 //打包体积减少比较多 2.压缩...
  • 关于项目打包上线那点事情 1.友盟多渠道打包 https://blog.csdn.net/qq_34178710/article/details/99740783#_26 什么是签名? 什么是多渠道? 什么是代码混淆? 2.代码混淆规则介绍,面试会问 ...(1)在项目的build...
  • vue项目打包上线步骤

    2021-03-28 17:24:10
    项目上线之前, 一定是先打包, 后上线!!! 打包的过程中, 会对代码进行压缩合并, 版本降级, 语法转换等… 1.异步组件配置(路由懒加载) 1.项目大了: 一上来加载所有的组件, 首屏加载就比较慢, 可以配置路由按需加载 ...
  • vue项目打包上线后页面样式与开发页面不一致 原因: 打包的过程会进行优化,导致引入样式文件的顺序发生变化 解决办法: 将自己写的样式文件放在最后面,框架什么的放在前面 注意:每个组件的样式文件记得加上...
  • 打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种: ① 通过命令行参数的形式生成报告 // 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以...
  • VUE项目打包上线

    2018-12-19 15:42:02
    目前去哪儿项目已经做好,很多...1、如何打包 1.1 在package.json中有一个build可以打包 1.2 使用命令行语句 run npm build 会在项目根目录下生成一个dist文件夹,此时打开dist文件夹中的index.html打开时空...
  • vue 项目打包上线

    2021-05-11 15:01:02
    在根目录添加文件 vue.config.js module.exports = { publicPath: './' } 执行 npm run build
  • 但是项目打包上线以后出现二级页面 404 的问题。例如 /about 页面。刷新就会出现 404 。或者直接复制二级页面重新打开同样也是 404。 最终经过一番搜索,解决方案如下: Nginx 例如使用 Nginx 部署,须做如下修改...
  • 最近做一个vue项目遇到了一个问题,项目打包上线发现chunk-vendors.js文件也太大了点,第一次加载页面需要将近30s,这肯定是无法容忍的,于是‘调研’了一番,记录下解决方法 在vue.config.js中添加 const path = ...
  • vue项目打包上线优化

    2020-12-15 22:27:54
    写过几个vue的案例也好,项目也好都没有真正上线, 就连公司的项目都是直接打包给后台统一部署, 因此打包相关经验比较少, 大学一直在做的一个个人博客在部署到阿里服务器以后访问一直都很慢(学生机带宽只有1M), 之前听...
  • vue 项目打包 上线

    2019-01-02 10:38:39
    1,配置相关  hash:true 版本控制  ...我的项目中在如下设置了,所以只要把 "/api" 去掉就好了   2,打包,然后会生成一个dist文件夹 npm run build       3...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,211
精华内容 884
关键字:

项目打包上线