浅析vue-cli2和vue-cli4
目录安装及版本切换项目初始化目录结构对比安装及版本切换查看当前版本，如果是2开头说明当前使用的是vue-cli2，3开头的话就是vue-cli3vue --version如果无法识别vue命令说明没有安装vue-cli，使用以下说明进行安装安装2.0版本:npm install -g vue-cli安装3.0版本：npm install -g @vue/cli版本切换，即卸载当前版本，安装另外的版
·
安装及版本切换
查看当前版本，如果是2开头说明当前使用的是vue-cli2，4开头的话就是vue-cli4
vue --version
如果无法识别vue命令说明没有安装vue-cli，使用以下说明进行安装
安装2.0版本:
npm install -g vue-cli
安装4.0版本：
npm install -g @vue/cli
版本切换，即卸载当前版本，安装另外的版本
从2.0升级到4.0：
npm uninstall -g vue-cli
npm install -g @vue/cli
从4.0降到2.0：
npm uninstall -g @vue/cli
npm install -g vue-cli
如果切换失败，显示无法加载文件…/npm/vue.ps1,因为在此系统上禁止运行脚本。。。。
遇到这种情况 使用管理员身份运行 PowerShell，
然后输入set-executionpolicy remotesigned，出现以下选项，然后输入Y回车即可
执行策略更改
执行策略可以防止您执行不信任的脚本。更改执行策略可能会使您面临 about_Execution_Policies
帮助主题中所述的安全风险。是否要更改执行策略?
[Y] 是(Y) [N] 否(N) [S] 挂起(S) [?] 帮助 (默认值为“N”):
项目初始化
2.0初始化，vue init <模板名称（webpack比较常用）> [项目名称]
vue init webpack cli2-test
如果下载模板速度慢，可以修改npm仓库到淘宝镜像
npm config set registry https://registry.npm.taobao.org
2.0项目初始化参数介绍
//项目名称
Project name ...
//作者的信息，会默认从git中读取信息
Project description ...
Author ...
//vue build的选项 1.runtime-compiler 2.runtime-only (一般选第一个就好)
vue build ...
//是否安装vue-router，一般选用YES，省去手动创建路由
Install vue-router？ ..
//是否使用ESLint检测代码规范，规范可根据选项选择不同的规范库或者自己添加规范
use ESLint to link your code
//是否写单元测试 （一般不使用）
Set up unit tests
//是否使用Nightwatch来进行e2e测试 （2代表to e to e 点对点）
Setup e2e test with Nightwatch？
//使用npm或者yarn包管理工具
use npm
use yarn
2.0项目初始化参数推荐
4.0初始化，vue create [项目名称]
vue create cli3-test
4.0项目初始化参数介绍
//选择一个配置方式
please pick a perset (一般选最后一个Manually select features（手动选择特性） )
//选择对于你的工程所需要的特性 （用空格选择）
check the features needed for your project
( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试
//对应的配置文件单独生成还是放在package.json里
where do you prefer placing config for babel
//要不要把刚才自己选择的配置保存下来
save this as a preset for future projects?
4.0项目初始化参数推荐
目录结构对比
2.0目录结构
4.0 目录结构
对比一下两种方式初始化出来的项目结构，下面说一些对我们开发影响比较大的主要的变化
- 4.0版本中项目环境变量配置文件没有了（dev.env.js / prod.env.js）
我们可以通过在项目根目录下手动创建不同环境的配置文件，具体的环境变量名称由package.json中运行参数决定,下面举个例子添加development、production和uat版本的环境变量：
// .env.delelopment
NODE_ENV=development
VUE_APP_MODE=development
BASE_URL=/develop
// .env.production
NODE_ENV=production
VUE_APP_MODE=production
BASE_URL=/api
// .env.uat
NODE_ENV=production
VUE_APP_MODE=uat
BASE_URL=/uat
// package.json
----
"scripts": {
"serve": "vue-cli-service serve",
"build:uat": "vue-cli-service build --mode uat", // 通过 --mode来运行不同的环境，自动识别到.env.uat配置文件
"build:production": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
----
- 4.0版本中不同环境的webpack配置文件也没有了（webpack.base.conf.js / webpack.dev.conf.js / webpack.prod.conf.js）
同样，我们也可以再根目录中创建vue.config.js文件来进行webpack和vue的一些配置
const path = require('path')
module.exports = {
publicPath: './', // 基本路径,打包时加上.
outputDir: process.env.outputDir, // 输出文件目录
lintOnSave: false, // eslint-loader 是否在保存的时候检查
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
// webpack配置
chainWebpack: (config) => {
config.resolve.symlinks(true)
},
configureWebpack: (config) => {
if (process.env.VUE_APP_MODE === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
} else {
// 为开发环境修改配置...
config.mode = 'development'
}
Object.assign(config, {
// 开发生产共同配置
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@c': path.resolve(__dirname, './src/components'),
'@p': path.resolve(__dirname, './src/views')
} // 别名配置
}
})
},
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
// css相关配置
css: {
// extract: true, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: false, // 开启 CSS source maps?
loaderOptions: {
css: {}, // 这里的选项会传递给 css-loader
less: {
modifyVars: {
// less vars，customize ant design theme
// 'primary-color': '#F5222D',
// 'link-color': '#F5222D',
// 'border-radius-base': '4px'
},
// DO NOT REMOVE THIS LINE
javascriptEnabled: true
},
postcss: {
plugins: [
// 把px单位换算成rem单位
require('postcss-pxtorem')({
rootValue: 75, // 换算的基数(设计图750的根字体为32)
selectorBlackList: ['.van-'], // 要忽略的选择器并保留为px。
propList: ['*'], // 可以从px更改为rem的属性。
minPixelValue: 2 // 设置要替换的最小像素值。
}),
require('autoprefixer')
]
// plugins: [
// require('autoprefixer')
// ]
} // 这里的选项会传递给 postcss-loader
}, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
// modules: false, // 启用 CSS modules for all css / pre-processor files.
requireModuleExtension: true
},
parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
// webpack-dev-server 相关配置
devServer: {
open: false, // 自动打开浏览器
host: '0.0.0.0', // 允许外部ip访问
port: 8000, // 端口
https: false, // 启用https
overlay: {
warnings: true,
errors: true
}, // 错误、警告在页面弹出
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}, // 配置多个代理
},
// 第三方插件配置
pluginOptions: {}
}
IE兼容性
2.0版本构建出来的项目，如果使用路由懒加载(Promise)，或者其他ES6语法，在IE中会报错语法不支持Promise，或者报其他错误，最终结果都是router-view中加载不出来内容
4.0版本不会出现此问题，因为脚手架已经帮我们做好了
解决办法1
- 安装
@babel/polyfill
npm install @babel/polyfill --save-dev
- 配置webpack.base.conf.js中的entry
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
// 在这里将入口文件通过polyfill引入
- app: './src/main.js'
+ app: ['@babel/polyfill', './src/main.js']
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
...
解决办法2
办法1应该可以正常加载异步路由，如果还未显示，可以试另外一种方法：
- 安装
babel-preset-es2015
npm install babel-preset-es2015 --save-dev
- 在根目录下的 .babelrc 添加
es2015
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2",
+ "es2015"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
持续更新。。。
前往低代码交流专区
更多推荐
7
0- 0
已为社区贡献5条内容
所有评论(0)