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

    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.jswebpack.prod.conf.js文件中的new HtmlWebpackPlugin中添加以下代码:

        favicon: 'src/assets/imgs/favicon.ico',
    

    基本文件位置如下:
    在这里插入图片描述

    修改完配置文件最好 npm run dev 一下
    如果这样小图标还是没有显示,最好 清空一些缓存
    

    2.3 图片等静态文件路径问题

    注意问题所在:我引入了第三方组件zTree,但是组件中的部分图标位置引用的图片打包之后居然不显示。查看问题居然是路径问题,居然出现重复路径(啥也不说上图看):
    在这里插入图片描述

    解决方案:在build文件夹下的utils.js文件中的generateLoaders方法中添加如下代码:
    publicPath: '../../'
    

    在这里插入图片描述

    展开全文
  • vue项目打包上线白屏问题

    千次阅读 2018-12-03 09:14:08
    一、项目打包 npm run build 二、路径问题 1.【问题描述】 CSS、JS路径报错,原因少了/dist这层路径 2【解决方案】 在webpack的模板下的/config/index.js中的 .build: 中assetsPublicPath: '/dist/', 三、...

    一、项目打包

    npm run build

    二、路径问题

    1.【问题描述】

    CSS、JS路径报错,原因少了/dist这层路径

    2【解决方案】

    在webpack的模板下的/config/index.js中的

    .build: 中assetsPublicPath: '/dist/',

    三、路由问题

    1.【问题描述】

    Vue中的路径是虚拟路径

    2【解决方案】

    router.js中 注释

    // mode: 'history',

     

    展开全文
  • vue项目打包上线流程以及遇到的问题 1.打包上线过程 1.1如何打包? 在项目的package.json文件中的build命令可以实现打包。 在终端执行命令npm run build,会在项目根目录下生成一个dist文件夹,打开文件夹如图。 ...

    vue项目打包上线流程以及遇到的问题

    1.打包上线过程

    1.1如何打包?

    1. 在项目的package.json文件中的build命令可以实现打包。
      在这里插入图片描述
    2. 在终端执行命令npm run build,会在项目根目录下生成一个dist文件夹,打开文件夹如图。
      在这里插入图片描述

    打开phpStudy服务,将dist文件夹放至phpStudy文件下的WWW文件夹下即可在本地访问查看。

    2.打包期间遇见问题

    2.1 css,js等静态文件路径错误

    1. 更改配置文件。打开项目文件下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项目打包上线

    2020-09-24 23:04:45
    打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种: ① 通过命令行参数的形式生成报告 // 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以...

    后台管理系统

    一.项目优化策略

    生成打包报告
    第三方库启用 CDN
    Element-UI 组件按需加载
    路由懒加载
    首页内容定制

    1、生成打包报告

    打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种:

    ① 通过命令行参数的形式生成报告

    // 通过 vue-cli 的命令选项可以生成打包报告
    // --report 选项可以生成 report.html 以帮助分析包内容
    vue-cli-service build --report
    

    ② 通过可视化的UI面板直接查看报告(推荐)

    1.在项目中进入cmd 输入vue ui
    在这里插入图片描述

    2.通过 vue.config.js 修改 webpack 的默认配置

    通过 vue-cli 3.0 工具生成的项目,默认隐藏了所有 webpack 的配置项,目的是为了屏蔽项目的配置过程,让程序员把工作的重心,放到具体功能和业务逻辑的实现上。

    如果程序员有修改 webpack 默认配置的需求,可以在项目根目录中,按需创建vue.config.js 这个配置文件,从而对项目的打包发布过程做自定义的配置(具体配置参考 https://cli.vuejs.org/zh/config/#vue-config-js)。

     // vue.config.js 
     // 这个文件中,应该导出一个包含了自定义配置选项的对象
     module.exports = {
     // 选项...
     }
    

    3. 为开发模式与发布模式指定不同的打包入口

    默认情况下,Vue项目的开发模式与发布模式,共用同一个打包的入口文件(即 src/main.js)。为了将项目的开发过程与发布过程分离,我们可以为两种模式,各自指定打包的入口文件,即:
    ① 开发模式的入口文件为 src/main-dev.js
    ② 发布模式的入口文件为 src/main-prod.js

    4. configureWebpack 和 chainWebpac

    https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3

    5. 通过 chainWebpack 自定义打包入口

    module.exports = {
     chainWebpack: config => {
     config.when(process.env.NODE_ENV === 'production', config => {
     config.entry('app').clear().add('./src/main-prod.js')
     })
     config.when(process.env.NODE_ENV === 'development', config => {
     config.entry('app').clear().add('./src/main-dev.js')
     })
    } }
    

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

    默认情况下,通过 import 语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题。

    为了解决上述问题,可以通过 webpack 的 externals 节点,来配置并加载外部的 CDN 资源。凡是声明在
    externals 中的第三方依赖包,都不会被打包。

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

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

    6.2 通过 externals 加载外部 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" />
    
    

    6.3 通过 externals 加载外部 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>
    
    

    7.通过 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>
    
    

    8. 首页内容定制

    chainWebpack: config => {
     config.when(process.env.NODE_ENV === 'production', config => {
     config.plugin('html').tap(args => {
     args[0].isProd = true
     return args
     })
     })
     config.when(process.env.NODE_ENV === 'development', config => {
     config.plugin('html').tap(args => {
     args[0].isProd = false
     return args
     })
     })
    }
    
    

    8.1 首页内容定制

    在 public/index.html 首页中,可以根据 isProd 的值,来决定如何渲染页面结构:

    <!– 按需渲染页面的标题 -->
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
    <!– 按需加载外部的 CDN 资源 -->
    <% if(htmlWebpackPlugin.options.isProd) { %>
    <!—通过 externals 加载的外部 CDN 资源-->
    <% } %>
    
    

    9. 路由懒加载

    当打包构建项目时,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')
    
    

    二.项目上线

    项目上线相关配置

    通过 node 创建 web 服务器。
    开启 gzip 配置。
    配置 https 服务。
    使用 pm2 管理应用。

    1. 通过 node 创建 web 服务器

    创建 node 项目,并安装 express,通过 express 快速创建 web 服务器,将 vue 打包生成的 dist 文件夹,
    托管为静态资源即可,关键代码如下:

    const express = require('express')
    // 创建 web 服务器
    const app = express()
    // 托管静态资源
    app.use(express.static('./dist'))
    // 启动 web 服务器
    app.listen(80, () => {
     console.log('web server running at http://127.0.0.1')
    })
    
    

    在这里只是用node搭建了一个服务器只是测试一下,真正的服务器是用java或nginx 搭建的上线服务器

    2. 开启 gzip 配置

    使用 gzip可以减小文件体积,使传输速度更快

    可以通过服务器端使用 Express 做 gzip 压缩。其配置如下:

    // 安装相应包
     npm install compression -S
     // 导入包
     const compression = require('compression');
     // 启用中间件
     app.use(compression());
    
    
    展开全文
  • vue项目打包上线流程

    2020-09-25 07:59:23
    我们在完成项目打包上线的时候,会发现他的文件很大,这个时候我就需要对项目先做一些优化,优化之后在进行打包 一、项目打包之前的优化 1. 通过 externals 加载外部 CDN 资源 默认情况下,通过 import 语法导入的...
  • 我们在完成项目打包上线的时候,会发现他的文件很大,这个时候我就需要对项目先做一些优化,优化之后在进行打包 一、项目打包之前的优化 1. 通过 externals 加载外部 CDN 资源 默认情况下,通过 import 语法导入的第...
  • 代理设置的作用是你要访问后端的请求直接发到当前站点,因此你的 api 路径都应该是不含 hostname 的相对路径部署到生产环境时,只要...因此,结论是,只要 proxyTable 设置得好,部署上线不需要做任何改动。...
  • vue项目打包上线的步骤

    千次阅读 2019-05-20 11:54:00
    utils.js(修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./',修改目的是为了解决js找不到的问题) 使用npm run build 打包...
  • 开发环境的跨域可以直接在vue cofig中设置,这个没啥说的,打包完成后就一点关系都没了 解决方案: a.通过jsonp跨域 b.通过修改document.domain来进行跨域 c.使用window.name跨域 d.使用HTML5中新引进的window....
  • vue的图片路径,和背景图片路径打包后错误解决 2017-12-11 16:00 by muamaker,7037阅读,0评论,收藏,编辑 最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,...
  • 最近做一个vue项目遇到了一个问题项目打包上线发现chunk-vendors.js文件也太大了点,第一次加载页面需要将近30s,这肯定是无法容忍的,于是‘调研’了一番,记录下解决方法 在vue.config.js中添加 const path = ...
  • vue项目 打包部署上线

    2018-05-25 20:37:00
    1. npm run dev:本地开发的时候做调试用的。...如果 vue 项目的代码上传到网站的根目录下一般是不会有问题的,也不会存在资源文件引用错误的情况,但如果 dist 文件夹没有放在网站服务器的根目录下,那么代码上...
  • Vue项目打包部署上线

    2019-12-11 17:35:04
    打包部署生产环境之前需要修改两个... utils.js(修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: ...
  • 打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种: ① 通过命令行参数的形式生成报告 // 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以...
  • vue+elementUI项目打包上线注意的问题

    千次阅读 2019-04-09 11:43:21
    vue+elementUI项目打包上线注意问题一:路由不跳转二:背景图片background不显示找不到文件 一:路由不跳转 在项目打包之前,放在本地的跳转都是完美的,但是打包之后就会出现路由无法跳转,并且报错。在router 中的...
  • 打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种: ① 通过命令行参数的形式生成报告 // 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以...
  • vue工程打包上线样式错乱问题

    万次阅读 2018-07-18 16:39:49
    项目开发完成后,执行 npm run build 进行打包,将打包完成的文件部署在服务器。配置好域名解析,就可以实现工程上线上线后,我们有时候会发现,它怎么和本地调试时长得不一样? 长得不一样是样式问题,是打包...
  • 最近做一个vue项目遇到了一个问题项目打包上线发现chunk-vendors.js文件也太大了点,第一次加载页面需要将近30s,这肯定是无法容忍的,于是‘调研’了一番,记录下解决方法 第一步:先下载这个插件 npm install...
  • 参考:链接: link. 修改build对象里的assetsPublicPath为’./’ ...1.main.js样式引入顺序问题 调整了import的顺序(可能是被第三方组件样式覆盖了,router放在最后引入,就可以实现组件样式在第三...
  • 在开发完成vue项目的时候,面临的问题就是打包部署。 打包很简单,只需要执行npm run build命令即可。 但是部署的时候需要使用nginx做反向代理,因为开发的时候我们使用的是webpack提供的proxyTable做的代理从而解决...
  • vue工程打包上线样式错乱问题 - bug总结 项目开发完成后,执行npm run build 进行打包,将打包完成的dist文件部署在服务器。配置好域名解析,就可以实现工程上线。上线后,我们有时候会发现,它怎么和本地调试...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 329
精华内容 131
关键字:

vue项目打包上线问题

vue 订阅