vue-cli3.0 升级记录

年三十时 vue2.6 发布，向 3.0 看齐，说明 3.0 不远了。作为开发者也应该为vue3.0 做点准备。首先是把 vue-cli 升级到 3.x ，在这记录下 vue-cli2.x 升级 vue-cli3.x 中遇见（将来）遇见的问题。

1、安装 vue-cli3.x

npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

如果希望还保留 vue-cli2.x 的语法或使用 2.x 的模板，建议安装 cli-init

npm install -g @vue/cli-init
# OR
yarn global add @vue/cli-init
复制代码

2、使用 vue-cli3.x 创建项目

vue create hello-world 按照提示完成创建，新建的项目比 2.0 的文件要少很多，删除了与编译相关的一些配置( 准确地说是在项目中删除了，真正的配置还是有的，在 node_modules/@vue 目录下 )。 src 目录依然不变，static 目录改成了 public。

3、遇见问题及解决方案

(1) public 与 static

public 与 static 作用基本相同，但是在动态引用路径上有区别，不能直接将 static 替换为 public 。如：'./static/config/conf.js' 替换为 './public/config/conf.js' 会报 404 错误，应改为 './config/conf.js' ，也就是 public 不要出现在路径中。

(2) heap out of memory crash

项目中如果引用了比较大的 js 文件，在开发运行时就会出现这个错误，导致出现这个错误主要是插件（plugin）内存管理不佳导，解决方法：在项目根目录下新建文件 .eslintignore ，把大文件所在的路径添加进去，如

public/
复制代码

(3) 编译打包配置

如果希望对 webpack 等进行细致化配置，可以在项目根目录下新建文件vue.config.js，具体配置可参考，下面是一份基本配置。

const path = require('path')

module.exports = {  
  // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致
  publicPath: './',  
  // 输出文件目录
  outputDir: 'dist',  
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,  
  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,  
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,  
  // 生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
  integrity: false,  
  // webpack相关配置
  chainWebpack: (config) => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', path.resolve(__dirname, './src'))
  },
  configureWebpack: (config) => {    
  if (process.env.NODE_ENV === 'production') {      
      // 生产环境
      config.mode = 'production'
    } else {      
      // 开发环境
      config.mode = 'development'
    }
  },  
  // css相关配置
  css: {    
    // 是否分离css（插件ExtractTextPlugin）
    extract: true,    
    // 是否开启 CSS source maps
    sourceMap: false,   
    // css预设器配置项
    loaderOptions: {},    
    // 是否启用 CSS modules for all css / pre-processor files.
    modules: false
  },  
  // 是否使用 thread-loader
  parallel: require('os').cpus().length > 1, 
  // PWA 插件相关配置
  pwa: {}, 
  // webpack-dev-server 相关配置
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,   
    // http 代理配置
    proxy: {      
      '/api': {
        target: 'http://127.0.0.1:3000/api',
        changeOrigin: true,
        pathRewrite: {          
            '^/api': ''
        }
      }
    },
    before: (app) => {}
  }, 
  // 第三方插件配置
  pluginOptions: {

  }
}
复制代码