vue系列之项目打包

Posted 2020-09-01 zhaobao1830

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