精华内容
下载资源
问答
  • 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文件夹中

    展开全文
  • 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打包上线流程

    VUE项目的打包流程

    我们在项目打包时执行以下代码:

    npm run build
    

    1、新建vue.config.js,设置静态资源路径为’./’,解决打包后默认路径的白屏问题

    module.exports = {
    	publicPath: "./"
    }
    

    2、关闭生产环境下的SourceMap映射文件,包的大小减少80%

    module.exports = {
    	productionSourceMap: false,
    }
    

    3、配置跨域

    module.exports = {
      devServer: {
       open: false, // 自动启动浏览器
       host: '0.0.0.0', // localhost
       port: 6060, // 端口号
       hotOnly: false, // 热更新
    
       overlay: {
          //  当出现编译器错误或警告时,在浏览器中显示全屏覆盖层
          warnings: false,
          errors: true
        },
        proxy: {
          //配置跨域
          '/api': {
            target: 'https://www.test.com', // 接口的域名
            // ws: true, // 是否启用websockets
            changOrigin: true, // 开启代理,在本地创建一个虚拟服务端
            pathRewrite: {
              '^/api': '/'
            }
          }
        }
      }
    }
    

    4、配置 alias 别名

    //加载path模块
    const path = require('path')
    //定义resolve方法,把相对路径转换成绝对路径
    const resolve = dir => path.join(__dirname, dir)
    
    module.exports = {
      chainWebpack: config => {
        // 添加别名
        config.resolve.alias
          .set('@', resolve('src'))
          .set('assets', resolve('src/assets'))
          .set('api', resolve('src/api'))
          .set('views', resolve('src/views'))
          .set('components', resolve('src/components'))
      }
    }
    

    配置完成后,我们在项目中可以这样写路径:

    //之前这么写
    import Home from '../views/Home.vue'
    //配置alias别名后
    import Home from 'views/Home.vue'
    //也可以这么写
    import Home from '@/views/Home.vue'
    

    5、使用CDN 加速优化(能够大幅减小项目体积)

    cdn优化是指把第三方库比如(vue,vue-router,axios)通过cdn的方式引入项目中,这样vendor.js会显著减少,并且大大提升项目的首页加载速度。
    在 public/index.html 中添加:

        <!-- 使用CDN的CSS文件 -->
        <% for (var i in
          htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
          <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
          <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
        <% } %>
         <!-- 使用CDN加速的JS文件,配置在vue.config.js下 -->
        <% for (var i in
          htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
          <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
        <% } %>
    

    6.去除console.log打印以及注释(减小项目体积效果不明显)

    下载插件

    cnpm install uglifyjs-webpack-plugin --save-dev
    
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    const isProduction = process.env.NODE_ENV === 'production';
    
      configureWebpack: config => {
        const plugins = [];
        if (isProduction) {
          plugins.push(
            new UglifyJsPlugin({
              uglifyOptions: {
                output: {
                  comments: false, // 去掉注释
                },
                warnings: false,
                compress: {
                  drop_console: true,
                  drop_debugger: false,
                  pure_funcs: ['console.log']//移除console
                }
              }
            })
          )
        }
      },
    

    7、图片压缩

    通过下载插件进行优化

    npm install image-webpack-loader --save-dev
    
    module.exports = {
      // 根据你的实际情况更改这里
      publicPath,
      assetsDir: 'assets',
      lintOnSave: true,
      // image 压缩 定义在chainWebpack中
     chainWebpack: config => {
       config.module
          .rule('images')
          .use('image-webpack-loader')
          .loader('image-webpack-loader')
          .options({
            bypassOnDebug: true
          })
          .end()}
    }
    

    需要注意的是此插件容易下载失败,导致运行报错。
    若安装过 image-webpack-loader 先卸载:

    //npm 安装的npm 则npm 移除
    npm uninstall image-webpack-loader
    //如果yarn安装的,则yarn 移除
    yarn remove image-webpack-loader 
    

    用npm 或cnpm 进行安装:

    cnpm install image-webpack-loader --save-dev
    //cnpm安装速度比较快
    npm install image-webpack-loader --save-dev
    

    nginx服务器配置

    1、具体思路

    打包后生成的dist文件夹放到html 文件夹里面
    启动控制台(CMD)切换到Nginx目录下,输入start nginx ,然后在浏览器页面输入localhost,界面出现Welcom to Nginx!则表示安装成功。默认监听80端口号。

    2、路由转为history模式

    接着在nginx.conf文件里配置路径
    在这里插入图片描述

    3、nginx命令介绍

    ① start nginx 开启nginx服务

    ② nginx.exe -s stop 关闭nginx服务,快速停止nginx,可能并不保存相关信息

    ③ nginx.exe -s quit 关闭nginx服务,完整有序的停止nginx,并保存相关信息

    ④ nginx.exe -s reload 重载nginx服务,当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx
    ⑤ 使用 taskkill /F /IM nginx.exe > nul命令强关nginx服务器

    4、白屏问题

    先执行关闭nginx命令,然后再执行开启nginx命令即可

    展开全文
  • 我们在完成项目打包上线的时候,会发现他的文件很大,这个时候我就需要对项目先做一些优化,优化之后在进行打包 一、项目打包之前的优化 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.1、使用npm run build打包成最终要上线的代码 npm run build 然后会生成一个dist文件夹,然后把dist文件夹放到服务器中或给上线人员就可以了。

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 144
精华内容 57
关键字:

vue项目打包上线流程

vue 订阅