vue cli - 2 升级到 3的问题汇总

基于已有项目从cli 2项目升级到cli 3项目中，需要修改的几项

1. 多页面

更改vue.config.js配置， 遍历src/views目录下的所有入口文件，生成多个entry对象

const site = require('yargs').argv.site
const glob = require('glob')
const path = require('path')

module.exports = {
    pages: getPages()
}

function getPages() {
  var entryFiles = glob.sync(`./src/views/*/*.js`)
  var pages = {}
  entryFiles.forEach((filePath) => {
      var folderName = getPageFolderName(filePath)
      pages[folderName] = {
        entry: filePath,
        template: 'public/index.html',
        fileName: folderName + '.html',
      }
  })
  return pages
}


function getPageFolderName(filePath) {
  const matches = (/.+\/views\/([a-zA-Z0-9]+)\//g).exec(filePath)
  return matches.length && matches.length >= 2 ? matches[1] : ''
}

最终输入一个pages对象

{
 download:
   { entry: './src/views/download/index.js',
     template: 'public/index.html',
     fileName: 'download.html' },
  information:
   { entry: './src/views/information/index.js',
     template: 'public/index.html',
     fileName: 'information.html' },
}

2. 预编译器的支持

单独安装项目需要的预编译器

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

3. style的公共样式自动导入

可统一使用style-resources-loader导入公共样式到vue文件和其他scss文件

注意事项：config.module.rule('scss').oneOf(type), 其中rule函数的参数为项目用到的样式文件类型

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, 'src/assets/css/variable.scss'),
      ],
    })
}

4. 运行时报错

访问页面时报如下错误
[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.

原因
vue有两种形式的代码 compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式， 指向了"dist/vue.runtime.common.js"位置。

这是vue升级到2.0之后就有的特点。
项目用到如下实例化vue的写法，属于compiler模式

// compiler
new Vue({
  el: '#app',
  router: router,
  store: store,
  template: '<App/>',
  components: { App }
})

解决办法一

//runtime

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app")

解决方案二
修改webpack配置使vue加载时指向esm版

configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js' 
      }
    }

---

参考文章
https://blog.csdn.net/wxl1555/article/details/83187647