从vue-cli2.x👉升级至vue-cli3.0
vuecli3.0 官方文档
🍒 vuecli 2.x 升级3.0
npm uninstall -g vue-cli //先卸载原来的版本
npm install -g @vue/cli //下载vue-cli3.0版本
🍒 3.0自定义功能配置
- TypeScript
- Progressive Web App (PWA) Support
- Router
- Vuex
- CSS Pre-processors
- Linter / Formatter
- Unit Testing
- E2E Testing
🍒 创建项目
vue create vuecli3-test
🍒 选择Manually select features
🍒 选择自定义功能配置
Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试
🍒 选择CSS预处理器语言,LESS/SCSS看需求
🍒 选择ESLint的代码规范
🍒 进行代码检测,选择在保存时进行检测
🍒 选择单元测试解决方案,此处选择 Jest
🍒 选择 Babel、PostCSS、ESLint等配置文件存放位置
推荐单独保存在各自的配置文件
🍒 最后两步
? save this as a preset for future projects? Yes
//是否将以上这些将此保存为未来项目的预配置吗?
? save preset as:vue-test
//描述项目
🍒 配置完成后等待vue-cli完成初始化
// 进入到vue-test项目
cd vue-test
// - 启动服务
npm run serve
// - 打包编译
npm run build
🍒 创建完成后的目录
- 移除了配置文件目录, config 和 build 文件夹。
- 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中。
- 在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件。
🍒 vue.config.js
在根目录下新建一个 vue.config.js文件,进行你的配置,具体配置看文档
const path = require('path');
const IS_PROD = ['production'].includes(process.env.NODE_ENV)
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // 去掉注释
// gzip --start
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzip = true // 是否使用gzip
const productionGzipExtensions = ['js', 'css'] // 需要gzip压缩的文件后缀
// gzip --end
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
// 部署应用时的基本 URL
// baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080',
// baseUrl:'/',
publicPath: IS_PROD ? './' : '/',
// build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
outputDir: 'dist',
// build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
assetsDir: '',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
indexPath: 'index.html',
// 默认在生成的静态资源文件名中包含hash以控制缓存
filenameHashing: true,
// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader)
// lintOnSave: process.env.NODE_ENV !== 'production',
lintOnSave: false,
// 是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
// Babel 显式转译列表
transpileDependencies: [],
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
productionSourceMap: false,
// 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script>
🍒 vue-cli3.0中的移动端适配
- 项目中安装 lib-flexible 和 postcss-px2rem
npm install lib-flexible --save
npm install postcss-px2rem --save
- 入口文件引入
import 'lib-flexible/flexible.js'
- 🍒 postcss.config.js文件
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
}
重启项目。再看一下px有没有变成rem
1px的边框容易缺失,使用 /no/ 语法来屏蔽该属性转换
🍒 安装uglifyjs-webpack-plugin打包后去掉注释和console
npm install uglifyjs-webpack-plugin -D
vue.config.js中
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins = config.plugins.concat(
[
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
})
]
)
}
},
🍒 开启Gzip压缩
npm i -D compression-webpack-plugin
vue.config.js
const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
configureWebpack:config=>{
if(process.env.NODE_ENV === 'production'){
return{
plugins: [
new CompressionPlugin({
test:/\.js$|\.html$|.\css/, //匹配文件名
threshold: 10240,//对超过10k的数据压缩
deleteOriginalAssets: false //不删除源文件
})
]
}
}
},
}
🍒 运行打包后项目dist
npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist