vue-cli 3.x搭建项目以及其中vue.config.js文件的配置

1、项目的基本创建（官方文档：https://cli.vuejs.org/zh/guide/）

• 安装@vue/cli

  1、卸载vue-cli 2.x版本
       npm uninstall vue-cli -g
  
  2、安装@vue/cli 3.x版本
       npm install  -g @vue/cli
  
  3、查看版本号
       vue  --version   或者    vue  -V

• 特点
  • 移除了配置文件目录，config 和 build 文件夹；
  • 移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中；
  • 在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件；
  • 部分命令行发生变化：创建项目、运行项目
• 创建项目的步骤
  • 创建项目文件

    vue  create 项目名称     在2.x版本中  为   vue init webpack

  • 选择配置（第一个第二个为你之前安装的项目配置，第三个为默认配置（什么配置都没有，例如路由），第四个为自行配置，建议选第四个）

                     

• • 自行选择安装配置（如果不熟悉模块代表了什么，可以先按照下图选择）

    这个自行选择配置，按上下键切换目标选项，按空格键勾选和取消，按a全选，按i反选，选好后回车确定
    
    1、Babel，转译成浏览器可识别的语言，可以让你的项目支持最新的语法，如es6es7等
    2、TypeScript，新增的选项卡
    3、PWA，模拟原生app，渐进式网络应用程序（渐进式增强WEB应用）
    4、路由
    5、vuex管理模式
    6、css预处理语言
    7、代码规范
    8、组件单元测试
    9、端对端测试，模拟用户真实场景

                     

• • 选择路由模式（一般选择hash  yes代表history）

                     

• • 选择css预处理语言

                     

• • 选择代码规范配置

                     

• • 是否保存当前配置信息（第一个为保存，由于我是演示一下，所以就不保存了）

                    

• • 选择babel,postcss,eslint配置文件存放位置（建议第一个）
  • 最后状态为：

                     

• • 最后是否将配置项保存为预设，配置完成，生成项目；
  • 运行项目：

    npm run serve    vue 2.x中的启动方式为npm  run  dev

2、vue.config.js文件

• 前言

  在使用vue-cli3创建项目后，因为webpack的配置均被隐藏了，当你需要覆盖原有的配置时，则需要在项目的根目录下，新建vue.config.js文件，来配置新的配置。

• 基本配置：这里贴一个我常用的

  'use strict'
  const glob = require('glob')
  const userConfig = require('./src/config/user.config.js')
  const os = require('os')
  const webpack = require('webpack')
  const pages = {}
  //获取本机ip
  const network = os.networkInterfaces()
  let localhost = ''
  Object.keys(network).forEach(outerKey => {
      if (outerKey == 'WLAN' || outerKey == '以太网') {
          Object.keys(network[outerKey]).forEach(innerKey => {
              if (network[outerKey][innerKey].family == 'IPv4') {
                  localhost = network[outerKey][innerKey].address
              }
          })
      }
  })
  glob.sync('./src/pages/**/app.js').forEach(path => {
      const chunk = path.split('./src/pages/')[1].split('/app.js')[0]
      pages[chunk] = {
          entry: path,
          template: 'public/index.html',
          filename: `${chunk}.html`,
          chunks: ['chunk-vendors', 'chunk-common', chunk]
      }
  })
  module.exports = {
      baseUrl: process.env.NODE_ENV === 'production' ? dossierConfig.PRO_PUBLIC_PATH : dossierConfig.DEV_PUBLIC_PATH,
      outputDir: `dist${dossierConfig.PRO_PUBLIC_PATH}`,
      pages,
      runtimeCompiler: true,
      productionSourceMap: false,
      lintOnSave: false,
      devServer: {
          host: localhost,
          port: 8022,
          open: true,
          proxy: {
              '/user': {
                  target: 'http://10.0.0.0:8899',
                  ws: true,
                  changeOrigin: true,
                  pathRewrite: {
                      "^/user": "/",
                  }
              }
          }
      },
      css: {
          loaderOptions: {
              sass: {
                  data: '@import "@/styles/index.scss";'
              }
          }
      },
      configureWebpack: {
          plugins: [
              new webpack.ProvidePlugin({
                  $: "jquery",
                  jQuery: "jquery",
                  "window.jQuery": "jquery",
                  _: "lodash"
              })
          ]
      },
      chainWebpack: config => {
          config.module
              .rule('iview')
              .test(/iview.src.*?js$/)
              .use('babel')
              .loader('babel-loader')
              .end()
          Object.keys(pages).forEach(page => {
              config.plugins.delete(`preload-${page}`)
              config.plugins.delete(`prefetch-${page}`)
          })
      }
  }

3、环境变量（NODE_ENV）

• 开发模式 development、测试模式 test、生产模式 production
  • 注解：我们通常用环境变量NODE_ENV来进行区分；

4、@vue/cli中最大的特点：可视化

• windows + R 打开命令行，输入命令vue ui

          

• 在本地浏览器将自动打开一个服务，出现一个非常舒服的界面

          

• 创建项目
  • 填写项目名称 -----> 选择项目的目录 -----> 选择包管理器 -----> 点击 ‘下一步’

                      

• • 下面的操作跟cmd命令行大致一样，不在具体阐述
• 管理项目
• 导入项目

5、遇到的问题

      暂无