vue系列之项目打包

Posted zhaobao1830

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue系列之项目打包相关的知识,希望对你有一定的参考价值。

vue完成项目后,如何打包成静态文件,

打包:

1、vue.config.js配置,如果用默认的,打包以后,会找不到文件

// 公共路径(必须有的)
publicPath: "./",
// 输出文件目录
outputDir: "dist",
// 静态资源存放的文件夹(相对于ouputDir)
assetsDir: "assets",
productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小,加速构建

2、修改axios的url配置

打包成静态文件以后,将dist文件里的内容拷贝到tomcat的文件夹,启动tomcat,路径加文件名就可以访问到项目

 

优化:

在package.json的build后面添加--report,打包以后可以生成report.html文件,用来查看打包以后各文件的大小

今天讲项目打包以后,总大小是10MB,发现主要是element-ui、echarts和jquery大

解决办法是:

1、把这些使用cdn引入,放在index.html文件

    <script crossorigin="anonymous" integrity="sha384-9Jr6d8CsEUcQUN6knni8ysVfdmxMXdMdsVxZg11vjeNemsCcm8GSxFhWFgHRtn31" src="https://lib.baomitu.com/echarts/4.2.1/echarts-en.common.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
    <script src="https://unpkg.com/vuex@3.1.1"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.9/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@2.3.9/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>

2、在vue.config.js配置

configureWebpack:() => {
    return {
      externals: {
        \'vue\': \'Vue\',
        \'vue-router\': \'VueRouter\',
        \'vuex\': \'Vuex\',
        \'axios\': \'axios\',
        \'echarts\': \'echarts\',
        // \'jquery\': \'jquery\',
        \'element-ui\': \'ELEMENT\',
        // \'lodash\': \'lodash\',
        \'html2canvas\': \'html2canvas\'
      }
    }
  },

在测试中发现,jquery和lodash在项目启动后,会提示找不到,不知道为什么,注销以后就可以了

3、main.js

import ElementUI from \'element-ui\'

Vue.use(ElementUI)

删除

Vue.prototype.$echarts = echarts

删除   组件里直接用 echarts调用

4、备注:

(1)、启动项目之前,运行npm install

(2)、element-ui和vuex还是需要npm 安装的

因为项目中有引入这俩快内容

store index.js

 

以上是关于vue系列之项目打包的主要内容,如果未能解决你的问题,请参考以下文章

vue之webpack打包工具的使用

Vue开发系列二 熟悉项目结构

vue 之webpack打包工具的使用

vue去掉#打包发布等一系列坑。

Vue高级系列配置Vue脚手架-npm方法-vscode配置-vue.config.js-项目打包与发布-ESlint使用

vue项目优化之按需加载组件-使用webpack require.ensure