基于已有項目從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'

}

}

總結

以上是生活随笔為你收集整理的cli2弃用了吗 vue_vue cli - 2 升级到 3的问题汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。