关于 Vue CLI 3 (update...)

当前的 Vue CLI 版本为 v3.8.2

vue create vue-cli-apply

? please pick a preset: Manually select features (意为手动配置) 
? check the features needed for your project: Babel, CSS Pre-processors 
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less 
? where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files 
? Save this as a preset for future projects? N (不需要保存这些手动的配置) 

启动：
cd vue-cli-apply
npm run serve

1. 关于 vue.config.js

写法是基于 node 写法的，所以说 vue.config.js 里面不支持 import/export 语法。

vue.config.js:

// 基于 node的 node不支持import语法
let path = require('path')
module.exports = {
  //publicPath: './' //公共路径，以前叫baseUrl,从Vue CLI 3.3起已弃用，使用publicPath
  //process.env.NODE_ENV 是内置的环境变量
  //默认环境变量NODE_ENV，有两个production 和 development
  //如果是 production, 表示是生产环境
  //如果是 本地开发环境，就让publicPath 等于 './'
  publicPath:
    process.env.NODE_ENV === 'production' ? 'http://www.baidu.com/xxx' : '/',

  //资源路径
  //dir目录下新建 assets 目录，来存放打包后的 css, img, js
  assetsDir: 'assets',
  //输出的目录，默认是 dist
  //如果觉得打包后的 dist目录不好听，可以改成其他的，比如 my-dist
  outputDir: './my-dist',
  //是否可以使用 template 模板
  //使用模板方式，使用了多100k
  //一般不使用
  //默认就是false
  runtimeCompiler: true,
  //多余1核cpu时，启动并行压缩
  parallel: require('os').cpus().length > 1,
  //生产环境下，不使用sourceMap
  //默认会生成sourceMap
  //打包时，不再使用 sourceMap
  //这个是必备的属性
  productionSourceMap: false,

  //https://github.com/neutrinojs/webpack-chain
  //可以获取到webpack的配置，再增加一些自己的逻辑
  //使用了webpack-chain这个插件
  //控制webpack内部配置
  chainWebpack: config => {
    //起个别名， + 指向的是 src目录
    //配置目录别名
    //那么在组件中引入组件： import HelloWorld from '+/HelloWorld.vue'
    config.resolve.alias.set('+', path.resolve(__dirname, 'src/components'))
    //起个别名
    config.resolve.alias.set(
      'component',
      path.resolve(__dirname, 'src/components')
    )
  },
  //https://github.com/survivejs/webpack-merge
  //这里面就是webpack的配置
  //这里面写的配置，会与webpack的配置进行合并
  //使用了webpack-merge插件
  configureWebpack: {
    //新增插件等
    plugins: [],
    module: {}
  },
  //配置代理
  //devServer只有一个功能，就是配置代理
  //开发服务时，使用
  //基于的是http-proxy-middleware这个插件
  devServer: {
    proxy: {
      //如果访问的是/api, 会代理到 http://a.zf.cn:3000这个地址去
      '/api': {
        target: 'http://a.zf.cn:3000',
        changeOrigin: true,
        ws: true
      },
      '/api1': {
        target: 'http://www.a.com/xxx',
        ws: true,
        changeOrigin: true
      },
      '/api/getUser': {
        target: 'http://www.b.com/xxx',
        pathRewrite: {
          //这样写的话，会把 /api先变成'', 再去请求接口
          '/api': ''
        }
      }
    }
  },
  //第三方插件配置
  //vue add style-resources-loader
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        //插入全局样式
        path.resolve(__dirname, 'src/assets/common.less')
      ]
    }
    // 'style-resources-loader': {
    //   preProcessor: 'stylus',
    //   patterns: [path.resolve(__dirname, './src/styles/abstracts/*.styl')]
    // }
  }
}

1.1 publicPath

之前叫 baseUrl, 从 Vue CLI 3.3 起已弃用，使用 publicPath

2. 进行打包 npm run build