前端项目的打包发布

了解更多前端相关，请来我的博客

     命令:   npm run build

     作用：用vue-cli内部集成的webpack，把 .vue, .less, .js 等打包成浏览器可直接执行的代码 html，css，js。

     结果：会在项目根目录下创建 /dist目录，在这个目录下产出打包后的结果。

认识打包之后的结果

app-hash值.js ：主入口

chunk-vendors：(chunk:块 vendors：代理商)第三方包的代码统一放在这里（vue,vuex,vue-router,vant）

chunk-hash值.js 某个模块对应的js ,某个.vue文件编译之后的.js。

chunk.chunk-hash.js.map ：它会记录当前的.js文件中包含了哪个模块，对应代码位置,有利于代码出错快速找到源代码的位置。

打包结果分析

vuecli中提供一个打包分析的工具：vue-cli-service build --report

操作：在package.json 中的build项中，添加 --report

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --report",
    "lint": "vue-cli-service lint"
  },

重新打包     它会在dist目录下产生一个report.html文件，其中就有对打包结果的分析说明。

效果图

打包设置静态资源路径问题

无法双击启动dist下的index.html  

分析index.html打包后的代码发现, 所有静态资源的目录都是 /开头的,意思就是要访问url根目录下的文件, 但是服务器是vscode根目录为准, 路径找不到

解决   在vue.config.js - 配置中, 添加一下配置   让打包后的路径都以./ 相对路径为准

module.exports = {
  // https://cli.vuejs.org/zh/config/#publicpath
  // 设置打包后访问资源方式，以是相对路径来访问
  // dist目录下的index.html就可以直接双击打开
  publicPath: './'
}

重新打包

打包优化

   路由  

            路由配置文件中，设置component有两个方式

                 1：直接先导入，再设置           所有引入的文件全部打包到1个.js中

 优点：一次打开，不需要再请求资源 

 缺点：首页加载慢

                 2：懒加载        所有引入的文件单个打包的

优点：懒加载 用户访问才会加载 用户体验好

缺点：加载时需要等待

魔法注释:webpackChunkName 每个路由都会打包成一个单独的文件 魔法注释可以设置文件名

 component: () => import(
         /* webpackChunkName: "layout" */ 
                '../views/layout/layout.vue') ​​​​​​​ 

结论：高频操作的页面 使用直接导入  低频的页面使用懒加载

组件中的按需导入 （以vant组件为例）

     安装依赖包  npm i babel-plugin-import -D

     在项目根目录创建:babel.config.js   配置如下代码

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ],
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

在main.js中，只引入本项目开发中需要的部分组件即可

去除打包后的console.log

    安装依赖  npm install terser-webpack-plugin -D

    修改配置文件vue.config.js(根目录下，它是vue项目的配置文件)

module.exports = {
 
  configureWebpack: (config) => {
      // 在webpack的配置对象 config的 optimization属性的minimizer数组的第一个元素的options中设置....
      // 在打包之后的js中去掉console.log
     config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
  },
  publicPath: './'
}

打包瘦身(基于vue-element-admin二次开发)

把不需要的包排除 比如:vue xlsx  以及组件库

vue.config.js 中

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  externals: {
     /**
      * externals 对象属性解析。
      *  基本格式：
      *     '包名' : '在项目中引入的名字'
      *  
    */
    'vue': 'Vue',
    'element-ui': 'ElementUI',
    'xlsx': 'XLSX'
  },
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

再次打包,这些包就不在项目中 这时项目无法正常启动 需要引入网络资源

 引入网络资源

CDN内容分发网络

把一些静态资源：css， .js，图片，视频放在第三方的CDN服务器上，可以加速访问速度

前端项目中使用CDN好处：

1. 减少应用打包出来的包体积

2. 加快静态资源的访问

3. 利用浏览器缓存，不会变动的文件长期缓存

注意:在开发环境时，文件资源还是可以从本地node_modules中取出，而只有项目上线了，才需要           去使用外部资源。此时我们可以使用环境变量来进行区分

vue.config.js 中 

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
      /**
      * externals 对象属性解析：
      * '包名' : '在项目中引入的名字'
      * 以element-ui举例 我再main.js里是以
      * import ELEMENT from 'element-ui'
      * Vue.use(ELEMENT, { size: 'small' })
      * 这样引入的，所以我的externals的属性值应该是ELEMENT
    */
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/[email protected]/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js', // xlsx
    ]
  }
}

webpack配置externals配置项

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
+ externals: externals,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

 注入CDN到html

chainWebpack(config) {
  config.plugin('preload').tap(() => [
    {
      rel: 'preload',
      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      include: 'initial'
    }
  ])
  // 注入cdn变量 (打包时会执行)
  config.plugin('html').tap(args => {
    args[0].cdn = cdn // 配置cdn给插件
    return args
  })
  // 省略其他...
}

 public/index.html 

    
    
    
    
    

      
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        
        <% } %>


    
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      
    <% } %>
  

上线-以gitee为例

       dist目录中的内容推送到仓库

              修改 .gitignore     把/dist从忽略文件中删除

              正常提交代码        本次提交不要验证eslint ，在后边加上--no-verify

`git add . `把代码提交到库中。

`git commit -a -m  "你的打包信息" --no-verify`

           提交到仓库

在gitee中开启pages服务

上线-使用 koa 框架部署项目(基于vue-element-admin二次开发)

1:修改生产环境下的url   

.env.production中  VUE_APP_BASE_API = '生产环境地址'

2:建立一个服务器文件夹 并初始化npm  

       npm init -y

3: 安装服务端框架koa(也可以采用express或者egg)

      npm install koa koa-static

4:新建public目录 拷贝上小节打包完成后dist目录内容

5:在根目录下创建app.js

const Koa  = require('koa')
const serve = require('koa-static');

const app = new Koa();
app.use(serve(__dirname + "/public")); //将public下的代码静态化
app.listen(3333, () => {
  console.log('人资项目启动: 3333端口')
})