cli2弃用了吗 vue_vue cli - 2 升级到 3的问题汇总

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

多页面

更改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' },

}

预编译器的支持

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

# Sass

npm install -D sass-loader node-sass

# Less

npm install -D less-loader less

# Stylus

npm install -D stylus-loader stylus

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'),

],

})

}

运行时报错

访问页面时报如下错误

[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: '',

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'

}

}