vue项目最强打包,上线(nginx)

项目打包

我通常会在项目根目录创建vue.config.js去修改webpack配置。项目开发完成后，运行npm run build进行打包操作。
目的：

• 减小项目体积、提高首屏加载速度
• 提高用户体验

---

🤞修改publicPath
首先我们要修改publicPath，防止项目打包后出现白屏

module.exports = {
  publicPath: './', 	// 静态资源路径（默认/，打包后会白屏）
  outputDir: 'dist', 	// 打包后文件的目录 （默认为dist）
  assetsDir: 'static', 	//  outputDir的静态资源(js、css、img、fonts)目录  默认为‘’没有单独目录js/css/img在根目录中。
}

🤞去除生产环境sourceMap

sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间。有了map文件就可以像未加密的代码一样，准确的输出哪一行哪一列有错。

但是生产环境是不需要map文件的，如下配置可以去除

module.exports = {
  //去除生产环境的productionSourceMap
  productionSourceMap: false,
}

🤞去除console.log打印以及注释
首先下载插件

cnpm install uglifyjs-webpack-plugin --save-dev

然后修改vue.config.js配置

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
            }
          }
        })
      )
    }
  }

🤞使用CDN加速优化

cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样可以大大提升项目的首页加载速度

const isProduction = process.env.NODE_ENV === 'production';

// externals
const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  vant: 'vant',
  axios: 'axios'
}
// CDN外链，会插入到index.html中
// 使用的是vant
const cdn = {
  // 开发环境
  dev: {
    css: [],
    js: []
  },
 // 生产环境
  build: {
    css: ['https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'],
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
      'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
      'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
      'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
      'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
    ]
  }
}
module.exports = {
  configureWebpack: config => {
    // 为生产环境修改配置...
    if (isProduction) {
      // externals
      config.externals = externals
    }
  },
  chainWebpack: config => {
    /**
     * 添加CDN参数到htmlWebpackPlugin配置中
     */
    config.plugin('html').tap(args => {
      if (isProduction) {
        args[0].cdn = cdn.build
      } else {
        args[0].cdn = cdn.dev
      }
      return args
    })
  }
}

然后在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>
    <% } %>

这时候我们项目中就会出现以下：

🤞图片压缩
npm安装插件

npm install image-webpack-loader --save-dev

我们可以使用cnpm安装插件，因为国内比较快

npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install --save-dev image-webpack-loader

注意：此插件非常容易下载失败，导致运行报错

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

之后，修改vue.config.js配置

module.exports = {
  // image 压缩 定义在chainWebpack中
 chainWebpack: config => {
   config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .end()}
}

🤞公共代码的抽离

// 公共代码抽离
configureWebpack: config => {
//....
//优化项配置
config.optimization = {
    splitChunks: { // 分割代码块
        cacheGroups: {
            vendor: {//第三方库抽离
                chunks: 'all',
                test: /node_modules/,
                name: 'vendor',
                minChunks: 1,//在分割之前，这个代码块最小应该被引用的次数
                maxInitialRequests: 5,
                minSize: 0,//大于0个字节
                priority: 100//权重
            },
            common: {  //公用模块抽离
                chunks: 'all',
                test: /[\\/]src[\\/]js[\\/]/,
                name: 'common',
                minChunks: 2,在分割之前，这个代码块最小应该被引用的次数
                maxInitialRequests: 5,
                minSize: 0,//大于0个字节
                priority: 60
            },
            styles: { //样式抽离
                name: 'styles',
                test: /\.(sa|sc|c)ss$/,
                chunks: 'all',
                enforce: true
            },
            runtimeChunk: {
                name: 'manifest'
            }
        }
    }
}
}

问题

问题：在我的项目中为了更好的访问到背景图片，我把背景图片放到public里面，但是打包过后访问不到。
原因：publicPath配置为./， 打包后资源引用路径为相对路径，而我们public不会经过打包，打包过后它与index.html文件同级

解决方案：
你可以在.env.development文件下添加一个属性VUE_APP_PATH = /bg.png，在.env.production文件下添加一个VUE_APP_PATH = ./bg.png

// 在main.js
Vue.prototype.$path = process.env.VUE_APP_PATH
// 之后在需要使用到的页面里面
<div class="top-box" :style="{'backgroundImage':'url(' + $path+')'}"></div>

将项目部署到nginx服务器上

安装步骤：(Windows)
1, 下载nginx地址：nginx官网

2, 下载之后，可以看到以下目录

3, 在此目录下，打开控制台(cmd)，输入start nginx,然后在浏览器中输入localhost，出现如下界面表示安装成功。默认监听80端口号。

注意：存放nginx文件的目录下不能出现中文路径

4, nginx的操作

start nginx 开启nginx服务
nginx -s stop 关闭nginx服务，快速停止nginx，可能并不保存相关信息
nginx -s quit 关闭nginx服务，完整有序的停止nginx，并保存相关信息
nginx -s reload 重载nginx服务，当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx
使用 taskkill /F /IM nginx.exe > nul命令强关nginx服务器

5, 访问自己的项目
将npm run build生成的dist目录，放到html目录下
浏览器访问：localhost/dist/index.html就可以看到页面了。