搭建vue cli4项目及打包配置

1.安装vue/cli4.x

//卸载
npm uninstall vue-cli -g
//安装
 npm install -g @vue/cli

//安装yarn
npm install -g yarn
yarn config set registry https://registry.npm.taobao.org -g
//http://cdn.npm.taobao.org/dist/node-sass 已经失效
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass -g
yarn config get registry

2.创建vue项目

vue create 项目名称(不可有大写字母)

//选择第三个按需配置


空格选择，选好按回车（enter）

一个vue 2
一个vue 3
我这里选择vue2

是否使用路由的history模式，看个人及项目，开发时候可以不选择
使用history，上线后需要后端有相关配置
继续回车

由于本菜鸟还不会dart-sass
所以选择node-sass

选择哪个ESLint自动化代码格式化检测，分别为，只预防、airbnb配置、标注配置、最高配置，这里选择左后一种最高配置

选择代码检测的时机，这里选择在保存代码时检测

更新换将单独配置的文件放到pakage.json还是放在单独的文件，这里选择单独的文件即可，清晰

是否把以上设置过的预设配置保存起来，这里不需要，每次创建项目重新选择一遍不麻烦，很快就选择好了，输入n

如果报错
莫慌，把

node_modules删掉

npm install -g cnpm -registry=https://registry.npm.taobao.org

使用cnpm i重新下载依赖

3.运行项目

yarn serve

复制这网址到浏览器

4.到此为止已成功，下面配置babel.config.js
如果没有babel.config.js

//安装: 
npm install babel-plugin-component -D

安装成功之后生成文件: babel-config.js
下面配置 Element 文件按需加载

module.exports = {
     
  presets: [
    "@vue/cli-plugin-babel/preset"
  ],
  plugins: [
    [
      "component",
      {
     
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
}

5.下面开始vue.config.js配置，没有这文件，新建一个

安装webpack官网

npm install --save-dev webpack

安装compression-webpack-plugin 开启gzip 官网

npm i -D compression-webpack-plugin

const webpack = require("webpack");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];
module.exports = {
     
    publicPath: "./",//打包后的位置(如果不设置这个静态资源会报404)
    // publicPath: process.env.NODE_ENV === "production" ? "http://47.92.237.225:8080/dist" : "./",
    outputDir: "dist",//打包后的目录名称
    assetsDir: "static",//静态资源目录名称
    productionSourceMap: false,  //去掉打包的时候生成的map文件
    lintOnSave: true,
    filenameHashing: false,
    devServer: {
     
        sockHost: "http://192.168.2.22:8080/",
        disableHostCheck: true,
        host: "0.0.0.0",  //不清楚主机和目的网络
        port: 8080, // 源地址端口，自行修改
        disableHostCheck: true,
        hotOnly: false,
        useLocalIp: false,
        //下面配置为开启gzip
        configureWebpack: {
     
            plugins: [
                new CompressionWebpackPlugin({
     
                    filename: '[path].gz[query]',   // 提示[email protected]的话asset改为filename
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                    threshold: 10240,
                    minRatio: 0.8,
                    deleteOriginalAssets: false  //不删除源文件
                }),
            ]
        }
    }
}