vue-cli3.0脚手架搭建、解决跨域、打包、优化、项目压缩一条龙

这只是但入口，除此之外还有多入口的配置请移步这里

1、升级电脑上vue-cli到3.0以上版本

升级vue-cli后不用担心之前得项目运行不了，它是支持以前得项目得

2、之后开始创建项目

项目目录是这样的

这里还要手动加上四个文件

在.env.development文件中加入

VUE_APP_API ='我是测试接口'

在.env.production文件中加入

VUE_APP_API ='我是生产接口'

目的是为了打包的时候打出不同IP的包

3、添加必要得依赖这里用到的依赖有

//less引入与sass引入方法不一样(需要这两个插件)
cnpm i style-resources-loader vue-cli-plugin-style-resources-loader -D
//引入jquery
cnpm install jQuery -- save
//引入 axios
cnpm install axios --save
//zip压缩
cnpm install compression-webpack-plugin --save-dev
//压缩图片
cnpm install image-webpack-loader -D

4、vue.config.js添加配置项及项目得优化

const path = require('path');
const webpack = require('webpack')
// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'
// 是使用cdn
const needCdn = false
// 是否压缩文件
const isZip = false
// cdn链接
const cdn = {
   
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
   
    vue: 'Vue',
    vuex: 'Vuex',
  },
  // cdn的css链接
  css: [],
  // cdn的js链接
  js: [
    'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
    'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
  ]
}

module.exports = {
   
  // 公共路径
  publicPath: './',
  // 不同的环境打不同包名
  outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist',
  // 一次配置，全局使用，这个scss 因为每个文件都要引入
  css: {
     // 一次配置，全局使用，这个scss 因为每个文件都要引入
    loaderOptions: {
   
      //引入sass时用到
      sass: {
   
        // data: `@import "./src/assets/hotcss/px2rem.scss";`
      }
    }
  },
  //此处引入第三方插件
  pluginOptions: {
   
    /**
     * 引入style-resources-loader插件
     * less引入与sass引入方法不一样
     * 需要style-resources-loader 和 vue-cli-plugin-style-resources-loader两个插件才能引入成功
     * 注意这里引入less文件时不能用别名引入
     */
    'style-resources-loader': {
   
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/public.less'),
      ],
    },
  },
  //打包时是否产生map文件
  productionSourceMap: false,
  //对内部的 webpack 配置进行更细致的修改
  chainWebpack: config => {
   
  	//在路由中用懒加载时，webpack默认有预加载此设置是关闭预加载
  	config.plugins.delete('preload') 
    config.plugins.delete('prefetch')
    //压缩图片
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
    bypassOnDebug: true })
      .end(