1、打包后会生成dist目录，里面的index.html双击打开是空白的，需要部署到服务器上才能看到项目内容，此时可以通过vue.config.js中配置一个参数，这样本地打包完就可以看到效果
vue.config.js
1 const { defineConfig } = require('@vue/cli-service')
2 module.exports = defineConfig({
3 transpileDependencies: true,
4 // 允许打包的结果，以文件方式访问（允许双击打开）
5 publicPath: './'
6 })
2、打包之后dist目录下，js目录会存放项目用到的js文件，但是会发现存在很多xxx.map的文件(用于映射js文件与原始js的内容)，想要打包的时候去掉这些文件，也在vue.config.js中配置
1 const { defineConfig } = require('@vue/cli-service')
2 module.exports = defineConfig({
3 transpileDependencies: true,
4 // 允许打包的结果，以文件方式访问（允许双击打开）
5 publicPath: './',
6 // 去掉map文件
7 productionSourceMap: false,
8 })
3、分析项目的打包哪些文件占用大小
在package.json文件中，执行脚本中添加--report，例如下面的配置，执行pnpm run build打包的时候，就会在项目目录下生成report.html报告文件
1 {
2 "name": "mj-pc",
3 "version": "0.1.0",
4 "private": true,
5 "scripts": {
6 "serve": "vue-cli-service serve",
7 "build": "vue-cli-service build --report",
8 "lint": "vue-cli-service lint"
9 },
10 "dependencies": {
11 "axios": "^1.4.0",
12 "core-js": "^3.8.3",
13 "echarts": "^5.4.3",
14 "element-ui": "^2.15.13",
15 "vue": "^2.6.14",
16 "vue-quill-editor": "^3.0.6",
17 "vue-router": "^3.5.1",
18 "vuex": "^3.6.2"
19 },
20 "devDependencies": {
21 "@babel/core": "^7.12.16",
22 "@babel/eslint-parser": "^7.12.16",
23 "@vue/cli-plugin-babel": "~5.0.0",
24 "@vue/cli-plugin-eslint": "~5.0.0",
25 "@vue/cli-plugin-router": "~5.0.0",
26 "@vue/cli-plugin-vuex": "~5.0.0",
27 "@vue/cli-service": "~5.0.0",
28 "@vue/eslint-config-standard": "^6.1.0",
29 "eslint": "^7.32.0",
30 "eslint-plugin-import": "^2.25.3",
31 "eslint-plugin-node": "^11.1.0",
32 "eslint-plugin-promise": "^5.1.0",
33 "eslint-plugin-vue": "^8.0.3",
34 "sass": "^1.32.7",
35 "sass-loader": "^12.0.0",
36 "vue-template-compiler": "^2.6.14"
37 }
38 }
4、由于某些包打包之后比较大，不将这些组件打包到项目中，使用对应的CDN导入这些组件
1、去哪里找第三方包：
https://www.jsdelivr.com/ --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script> --> 网站有对应搜索框搜索组件
https://unpkg.com/ --> 引入方式：unpkg.com/:package@:version/:file --> 网站搜索方式, https://unpkg.com/axios 回车 (网站域名后拼接要查找的组件名)
2、例如echarts查找地址：https://www.jsdelivr.com/package/npm/echarts
3、替换项目中的引入
例如之前导入echarts
1 import * as echarts from 'echarts'
在入口文件public/index.html文件中，使用CDN导入
1 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
4、项目中大部分能换成cdn的全都换成了cdn方式
1 <!DOCTYPE html> 2 <html lang=""> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 8 <title><%= htmlWebpackPlugin.options.title %></title> 9 <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css"> 10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.core.css"> 11 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css"> 12 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.bubble.css"> 13 </head> 14 <body> 15 <noscript> 16 <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> 17 </noscript> 18 <div id="app"></div> 19 <!-- built files will be auto injected --> 20 <!-- 引入网络当中的echarts --> 22 <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 23 <script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script> 24 <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script> 25 <script src="https://unpkg.com/[email protected]/dist/vuex.js"></script> 26 <script src="https://unpkg.com/[email protected]/lib/index.js"></script> 27 <script src="https://unpkg.com/[email protected]/dist/echarts.js"></script> 28 <script src="https://unpkg.com/[email protected]/dist/quill.js"></script> 29 <script src="https://unpkg.com/[email protected]/dist/vue-quill-editor.js"></script> 30 </body> 31 </html>
5、当使用了网络资源引入方式，则项目打包的时候要排除这些组件，不打包这些组件，需要在vue.config.js中配置排除这些组件
1 const { defineConfig } = require('@vue/cli-service')
2 module.exports = defineConfig({
3 transpileDependencies: true,
4 // 允许打包的结果，以文件方式访问（允许双击打开）
5 publicPath: './',
6 // 去掉map文件
7 productionSourceMap: false,
8 // 打包时，排除哪些组件
9 configureWebpack: {
10 externals: {
11 // 键(包名): '引入echarts.js后，window中多了什么'
12 axios: 'axios',
13 vue: 'Vue',
14 'vue-router': 'VueRouter',
15 vuex: 'Vuex',
16 echarts: 'echarts',
17 'element-ui': 'ELEMENT',
18 'vue-quill-editor': 'VueQuillEditor'
19 }
20 }
21 })
标签：map,vue,cli,文件,js,echarts,打包 From： https://www.cnblogs.com/wang1001/p/18123676