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'
}
}
cli2弃用了吗 vue_vue cli - 2 升级到 3的问题汇总相关推荐
- vue cli 3 升级到 vue cli 4 方法步骤及升级点总结
vue cli 3 升级到 vue cli 4 方法步骤及升级点总结 官方升级英文文档,中文文档相对滞后. 简介:vue cli 4 官方已经更新有一段时间了,现在是4.0.5 版本,看了官方文档大概 ...
- vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
- cli2弃用了吗 vue_vue-cli 3 和 vue-cli 2的区别
一.常用命令 vue -V 查看本地 vue 版本 二.官方文档 三.创建文件 3.0:vue create 进入工程文件夹,创建项目. 2.0:vue init webpack 四.启动项目 3.0 ...
- 安装Vue CLI项目(Vue2.0)
一.Vue CLI脚手架(Vue2.0) Vue CLI官方文档:官方文档 1.什么是脚手架 命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及 ...
- San CLI 4.0 升级指南
San CLI 历经多个版本迭代,目前已经进入 4.0 版本,增加 webpack5 支持.优化配置机制等,本文会对升级经验做出总结,期望给读者带来一些启发. 前言 San CLI 更新到 3.0 版 ...
- node升级命令_Vue CLI 4 发布:自动化升级过程,支持自定义包管理器
作者 | Swanand Kadam 译者 | 无明 Vue CLI[1] 团队最近把他们的命令行工具更新到了 4.0.0 版本.这一版本可以帮助开发者自动化升级过程,可以使用额外的包管理器,并可以更 ...
- Vue学习笔记之14-Vue-CLI脚手架
什么是Vue CLI 如果只是写几个Vue的Demo程序, 那么时不需要用Vue CLI的 如果在开发大型项目的话, 那么就需要, 而且必然需要使用Vue CLI 因为在使用Vue.js开发大型应用的 ...
- Open3DGen:从RGB-D图像重建纹理3D模型的开源软件
点云PCL免费知识星球,点云论文速读. 文章:Open3DGen: Open-Source Software for Reconstructing Textured 3D Models from RG ...
- Apache IoTDB v0.13 发布!
本文约1500字,建议阅读5分钟 下载最新版本Apache IoTDB v0.13. Release Announcement version 0.13 Apache IoTDB v0.13 ...
最新文章
- 3、绘制E-R图:数据库概要设计阶段
- mysql-sql语句
- 机床使用教学_2020沧州cnc培训20年教学经验颁发职业
- 最简单的SpringCloud教程 | 第二篇: 服务消费者(rest+ribbon)(Finchley版本)
- 【华为云技术分享】《跟唐老师学习云网络》—ARP你在哪
- 入门机却拥有旗舰级音质体验 Redmi红米8系列音频信息曝光
- ubuntu环境变量相关文件/etc/profile,/etc/bash.bashrc,~/.profile,~/.bashrc区别
- notepad++ python指定anaconda环境以及代码补全设置
- php7 ob get contents,关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
- 【OpenGL开发】glut和freeglut下载及配置
- 写给人类的机器学习 一、为什么机器学习重要
- 短视频剪辑如何入门?短视频剪辑常用的配音软件
- BZOJ3787 gty的文艺妹子序列 【树状数组】【分块】
- 网易云服务器使用https
- cad断点快捷键_CAD中打断于点的快捷键
- 转:我在淘宝这7年(四)
- vue-cli3打包时图片压缩处理
- ellipsize实现跑马灯总结
- happens-before揭秘
- 网易我的世界导入皮肤服务器显示吗,网易我的世界导入皮肤方法 | 手游网游页游攻略大全...
热门文章
- LeetCode之Single Number
- linux c之main(int argc, char *argv[], char *envp[])参数意义
- 浅谈C++类(7)--析构函数
- Android之PowerManager简介
- Android之ADB常用命令
- 这8个中国天文台你肯定不认识!
- 年度迷惑新闻:美女其实是个男生?
- 一名毕业生的自述:我知道我必须写论文,但没聪明到可以写出来......
- 客户想你死系列,哈哈哈设计师不容易啊! | 今日最佳
- 银联再发道歉声明;印度发布吃鸡禁令;甘肃全省校园禁售辣条;波音面临50亿罚款;女子撕扯民警头发罚两百;这就是今天的大新闻。...