Mac Vue-cli3.x踩坑记录

前沿

  随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/******

  1. username 代表Mac的用户名
  2. /Users/** 代表项目路径

二、配置问题

1. 安装系列依赖

  • axios:交互
  • qs:数据格式
  • echarts:图表,数据可视化
  • px2rem:自适应解决方案

2. vue.config.js 配置

配置vue.config.js,解决系列问题。如基本路径、打生产包去除.map文件、代码压缩等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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进行时会报错。报错信息如下:

1
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.

解决方案现给出三种:

  1. main.js修改

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 原
    new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
    })

    // 修改为如下:
    new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount('#app')
  2. config配置

    1
    2
    3
    4
    5
    6
    7
    config.resolve = {
    extensions: ['.js', '.vue', '.json'],
    alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    }
    }
  3. 引入路径修改
    import Vue from 'vue'修改为import Vue from 'vue/dist/vue.esm.js'
    同理,在router配置的过程中,也改成以上路径即可。

---本文结束感谢您的阅读---

本文标题:Mac Vue-cli3.x踩坑记录

文章作者:Lomo 朱幸民

发布时间:2019年07月10日 - 15:27:09

最后更新:2019年07月10日 - 19:07:11

原始链接:https://www.zhuxingmin.com/2019/07/10/Mac-Vue-cli3-x踩坑记录/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请作者喝杯咖啡吧~
0%