Vue-cli3常用配置

vue-cli3.0 功能丰富：对babel、Typescript、ESLint提供开箱即用的支持;易于扩展;无需Eject：vue cli 完全可配置的，无需再使用webpack配置;CLI图形化界面：vue ui图形化界面创建、开发和管理项目;即刻创建原型：用单个vue文件实现新的灵感;为现代浏览器轻松产出原生的ES2015代码，或将你的vue组件构建为原生的Web Components组件

Vue-cli3安装

Vue-cli
先卸载vue-cli2 npm uninstall vue-cli -g
安装vue-cli3 npm install -g @vue/cli
查看安装vue-cli版本 vue -V
使用图形界面创建项目 vue ui
使用命令行创建项目 vue create project
进入项目目录 cd project
启动项目 npm run serve
在Vue-cli3中要使用vue-cli2.x版本需要全局安装桥接工具 npm install -g @vue/cli-init 然后在使用vue init webpack project 初始化项目
配置npm run serve后自动打开浏览器在package.json中修改
1
2
3
"scripts": {
"serve": "vue-cli-service serve --open"
},

vue-cli3默认的目录结构

├── node_modules     # 项目依赖包目录
├── public
│   ├── favicon.ico  # ico图标
│   └── index.html   # 首页模板
├── src
│   ├── assets       # 样式图片目录
│   ├── components   # 组件目录
│   ├── views        # 页面目录
│   ├── App.vue      # 父组件
│   ├── main.js      # 入口文件
│   ├── router.js    # 路由配置文件
│   └── store.js     # vuex状态管理文件
├── .gitignore       # git忽略文件
├── .postcssrc.js    # postcss配置文件
├── babel.config.js  # babel配置文件
└── package.json     # 包管理文件

与vue-cli 2.x的差异

使用vue-cli 2.x构建出的目录会包含相应的webpack配置文件，但是在vue-cli 3.x中提供了一种开箱即用的模式，隐藏了webpack的配置，即你无需配置 webpack 就可以运行项目，并且它提供了一个 vue.config.js 文件来满足开发者对其封装的 webpack 默认配置的修改

vue.config.js配置

Vue-cli3中vue.config.js文件配置参考文档：参考文档`

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
module.exports = {
  // 部署生产环境和开发环境下的URL。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  //例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
  publicPath: process.env.NODE_ENV === "production" ?'/my-app/':'/',
  // outputDir: 在npm run build 生成文件的目录名称（要和baseUrl的生产环境路径一致）
  outputDir: "dist",
  //用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: "assets",
  //指定生成的 index.html 的输出路径  (打包之后，改变系统默认的index.html的文件名)
  // indexPath: "myIndex.html",
  //默认情况下，生成的静态资源文件名中包含了 hash以便更好的控制缓存。将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
  filenameHashing: false,
  // lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
  lintOnSave: true,
  //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false)
  runtimeCompiler: true,
  /**
   * 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   * 打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件
   * 不使用source map 可以防止在生产环境看到源代码
  */
  productionSourceMap: false,
  // 它支持webPack-dev-server的所有选项
  devServer: {
    host: "localhost", // 指定使用一个host默认是 localhost
    port: 8899, // 端口号
    https: false, // https:{type:Boolean}
    open: true, //是否自动启动浏览器
    overlay: {
      // 设置让浏览器 overlay 同时显示警告和错误 false不显示
      warnings: false,
      errors: false
    },
    // 配置代理
    proxy: {
      "/api": {
        target: "<url>",
        ws: true,
        logLevel: "debug", // 在控制台查看代理状态
        headers: { // 添加请求头
          "cookie": "xxxx"
        },
        changeOrigin: true,
        pathRewrite: { // 替换路径
          '^/api': '/jsons'
        }
      },
    }
  },
  //调整 webpack 配置 在 vue.config.js 中的 configureWebpack 选项提供一个对象
  //该对象将会被 webpack-merge 合并入最终的 webpack 配置
  configureWebpack: { // 配置别名方式1
    name: name,
    resolve: {
      alias: { // 配置别名 将复杂的文件路径定义成一个变量来访问
        '@': resolve('src'),
        '_common': resolve('src/common')
      }
    }
  },
  // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。可以让我们能够使用链式操作来修改配置
  chainWebpack(config) {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        // 修改它的选项...
        return option
      })
    // 配置别名方式2 在样式中或html模板中引用路径的间写时前面需要加上~符 避免解析失败
    // .bg{background-url:~_assets/common/bg1.jpg} 或 <img src="~_assets/common/banner1.png" />
    config.resolve.alias
      .set('@', path.resolve('src'))
      .set('_assets', path.resolve('src/assets'))
    // 删除预加载文件 空闲时下载 <link href="/js/1.js" rel="prefetch">
    config.plugins.delete('prefetch')
  }
};

查看默认及修改后的webpack配置

vue inspect 查看所有的webpack配置
vue inspect --mode <mode> 查看某个环境的配置 mode取值有 develop、test、develop

vue inspect --rules 查看所有已配置规则名称列表

vue inspect --rules
[
  'vue',
  'images',
  'svg',
  'media',
  'fonts',
  'pug',
  'css',
  'postcss',
  'scss',
  'sass',
  'less',
  'stylus',
  'js',
  'eslint'
]

vue inspect --rule <ruleName> 查看指定规则的配置

vue inspect --rule images
/* config.module.rule('images') */
{
  test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
  use: [
    /* config.module.rule('images').use('url-loader') */
    {
      loader: 'xxx\\node_modules\\url-loader\\dist\\cjs.js',
      options: {
        limit: 4096,
        fallback: {
          loader: 'xxx\\node_modules\\file-loader\\dist\\cjs.js',
          options: {
            name: 'img/[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
}

vue inspect --plugins 查看所有plugins插件配置名称列表

vue inspect --plugins
[
  'vue-loader',
  'define',
  'case-sensitive-paths',
  'friendly-errors',
  'html',
  'preload',
  'prefetch',
  'copy'
]

vue inspect plugin <pluginName> 查看指定的plugin插件的配置

vue inspect --plugin html
/* config.plugin('html') */
new HtmlWebpackPlugin(
  {
    title: 'pro',
    templateParameters: function () { /* omitted long function */ },
    template: 'xxx\\public\\index.html'
  }
)

vue inspect plugins 查看所有plugins插件配置

[
  /* config.plugin('vue-loader') */
  new VueLoaderPlugin(),
  /* config.plugin('define') */
  new DefinePlugin(
    {
      'process.env': {
        NODE_ENV: '"development"',
        BASE_URL: '"/"'
      }
    }
  ),
  /* config.plugin('case-sensitive-paths') */
  new CaseSensitivePathsPlugin(),
  ...
]

.env文件与环境配置

不同的配置文件.env对应不同的环境

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
相同配置项的权重：.env.[mode].local > .env.[mode] > .env.local > .env
修改package.json中的npm-script脚本的命令如：
"scripts": {
  // 测试环境 对应配置文件 .env.test
  "build-test": "vue-cli-service build --mode=test",
  // 生产环境 对应配置文件 .env.prod
  "build-prod": "vue-cli-service build --mode=prod"
}
build-test 会读取.env.test配置文件
build-prod 会读取.env.prod配置文件
vue-cli-service serve 会使用默认环境development
vue-cli-service build 会使用默认环境production
// vue.config.js
console.log(process.env.NODE_ENV); // development（在终端输出）
仅支持注入环境配置文件中以 VUE_APP_ 开头的变量
// .env.test
VUE_APP_clientId = 350
VUE_APP_DBS_URL = 'http://33.11.22.45'
// 使用
headers.clientId =process.env.VUE_APP_clientId

在VueCLI3使用template模板报错

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

VueCLI3默认使用vue.runtime.js，不允许编译template模板，用了template选项，会报错。解决方案有两种，一是手动将template改写为Render函数；另一种是修改vue.config.js：module.exports={ runtimeCompiler: true // 使用包含运行时编译器的 Vue 构建版本。可以在 Vue 组件中使用 template 选项，但是额外增加 10kb 左右}

build.js 说明

app.[hash].css 将组件中的css编译合并
app.[hash].js 包含所有components中的js代码(当前应用程序开发的所有代码(业务代码))
vendor.[hash].js 包含了所有引用的node_mdules中的代码(第三方库代码 vue/vue-router/axios等)

TEW's blog