vue-cli3.x( bate版 ) 中 vue.config.js 配置含义

vue-cli3.0 中 vue.config.js 配置含义

在vue-cli3.x( bate版 ) 中有些配置需要自己去配置 需要在最外层同级目录下建立 vue.config.js 文件
下面就是配置文件中的一些基本配置项

module.exports = {
     
  baseUrl: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
  assetsDir: '',//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  indexPath: 'index.html',//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  pages: {
     //pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
    index: {
     //除了 entry 之外都是可选的
      entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
      template: 'public/index.html',// 模板来源
      filename: 'index.html',// 在 dist/index.html 的输出
      title: 'Index Page',// 当使用 title 选项时,在 template 中使用：
      chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
    },
    subpage: 'src/subpage/main.js'//官方解释：当使用只有入口的字符串格式时,模板会被推导为'public/subpage.html',若找不到就回退到'public/index.html',输出文件名会被推导为'subpage.html'
  },
  lintOnSave: true,// 是否在保存的时候检查
  productionSourceMap: true,// 生产环境是否生成 sourceMap 文件
  css: {
     
    extract: true,// 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false,// 开启 CSS source maps
    loaderOptions: {
     },// css预设器配置项
    modules: false// 启用 CSS modules for all css / pre-processor files.
  },
  devServer: {
     // 环境配置
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    open: true, //配置自动启动浏览器
    proxy: {
     // 配置多个代理(配置一个 proxy: 'http://localhost:4000' )
      '/api': {
     
        target: '',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
     
        target: ''
      }
    }
  },
  pluginOptions: {
     // 第三方插件配置
    // ...
  }
};

由于vue-cli升级到3之后，减少了很多的配置文件，将所有的配置项都浓缩到了vue.config.js这个文件中，所以学懂并会用vue.config.js文件很重要。

热更新配置
在vue.config.js添加

1 chainWebpack: config => {
     
2     // 修复HMR
3     config.resolve.symlinks(true);
4 },

修改css部分热更新还需要注释掉 //extract: true,

css: {
     
     //extract: true,// 是否使用css分离插件 ExtractTextPlugin
     sourceMap: false,// 开启 CSS source maps
     loaderOptions: {
     },// css预设器配置项
     modules: false// 启用 CSS modules for all css / pre-processor files.
},

这样，热更新配置就完成了！

vue ui 图形化界面创建项目

vue ui

这个就不多介绍了，可视化界面创建新项目更直观，也可以添加一些项目依赖，插件和配置。