前沿
随vue技术逐渐成熟，开发者们热爱的脚手架vue-cli也一步步升级优化。在体验度不断上升的过程中，也必不可少的要踩一些坑。
本篇主要记录下在vue-cli2.x升级到3.x以及用Mac系统的踩坑记录。
一、安装问题
1. 升级node
此过程只需要升级新版本node即可。
2. 安装vue-cli 3
执行npm install -g @vue/cli
3. 创建新项目
sudo vue create andin
备注：在Mac系统执行过程中，会产生系列报错问题，一般情况下时权限不足不可创建。
4. 新建文件失败
在项目内，无论新建什么文件，都会报错提示无法新建。【无此问题的可忽略此步。】解决方案是打开可读写的权限。打开终端，cd到该项目目录下，执行如下：
sudo chown -R username /Users/******
- username 代表Mac的用户名
- /Users/****** 代表项目路径
二、配置问题
1. 安装系列依赖
- axios：交互
- qs：数据格式
- echarts：图表，数据可视化
- px2rem：自适应解决方案
- ...
2. vue.config.js 配置
配置vue.config.js，解决系列问题。如基本路径、打生产包去除.map文件、代码压缩等。
const path = require('path');
const resolve = dir => path.resolve(__dirname, dir);
// 去除console
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// 压缩css、js
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 要压缩的文件
const productionGzipExtensions = ['js', 'css'];
const env = process.env.NODE_ENV;
module.exports = {
// 基本路径配置，解决打包路径问题
publicPath: './',
configureWebpack: (config) => {
// 如果不是开发环境
if (env !== 'development') {
// 代码压缩
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
threshold: 10240,
minRatio: 0.8,
}));
// 打包后清除断点和控制台打印
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_debugger: true, // 注释debugger
drop_console: true, // 注释console
pure_funcs:['console.log'] // 移除console
},
},
sourceMap: false, // 去除打包后生成的.map文件
parallel: true,
}),
);
}
// 路径
config.resolve = {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
},
chainWebpack: config => {
// 字体自适应
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 37.5
});
// 指定入口 es6转es5
// config.entry.app = ['babel-polyfill', './src/main.js'];
// 添加别名
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('static', resolve('src/static'));
},
}
3. runtime进行时
如果是项目脚手架升级，那么其中需要格外注意的一点是runtime进行时会报错。报错信息如下：
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.
解决方案现给出三种：
- main.js修改
// 原
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
// 修改为如下：
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
- config配置
config.resolve = {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
- 引入路径修改
import Vue from 'vue'修改为import Vue from 'vue/dist/vue.esm.js'
同理，在router配置的过程中，也改成以上路径即可。
