vue的相关问题

作者: 醉月思发布日期: 2019-10-28 分类: 技术实践

在 Deepin/Ubuntu 上搭 Vue + iView 主题时，踩了一串环境坑，顺手记在这里，免得下次又从装 Node 重来。

安装nodejs

sudo apt-get install nodejs

apt 的 node 版本可能偏老，后面跑 @vue/cli 或装新依赖会报引擎不兼容，必要时用 n 升级（见下文）。

安装npm

sudo apt install npm

改镜像源

国内装包慢、超时，先换淘宝镜像再装全局 CLI：

sudo npm config set registry https://registry.npm.taobao.org
sudo npm config list

config list 里能看到 registry 是否生效。

升级node

sudo npm i -g n
sudo n stable

n 会装到 /usr/local，升级后开新终端再 node -v 确认。如果和 apt 装的 node 冲突，有时要手动调 PATH。

安装Vue

npm install -g @vue/cli

装完 vue --version 测一下，再 vue create 建项目。

引入less文件失败

iView 自定义主题要编译 less。只装 less 不够，loader 版本要和 vue-cli 匹配：

安装less，和less-loader

npm i --save less less-loader

iview自定义主题失败

两个解决方案

less降级为3以下，比如2.7.3 — 我实际用的是这条，less 3+ 和旧版 loader 组合容易炸
配置vue.config.js(未实践）

module.exports = {
	css: { // 配置css模块
    	loaderOptions: { // 向预处理器 Loader 传递配置选项
        	less: { // 配置less（其他样式解析用法一致）
            		javascriptEnabled: true // 设置为true
        	}
    	}
	}
}

javascriptEnabled: true 是因为 less 里可能有内联 JS 表达式，iView 主题文件会用到。

报错

ERROR in ./~/less-loader!./~/autoprefixer-loader!./src/styles/mytheme.less Module parse failed:

E:\ProjectDemo\vue\IVIEW\node_modules\less-loader\index.js!

E:\ProjectDemo\vue\IVIEW\node_modules\autoprefixer-loader\index.js

!E:\ProjectDemo\vue\IVIEW\src\styles\mytheme. less Unexpected token (1:0)

You may need an appropriate loader to handle this file type. | .ivu-load-loop {

| animation: ani-load-loop 1s linear infinite; |

}

修改webpack配置

{
    test: /\.less/,
    use: ExtractTextPlugin.extract({
        use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
        fallback: 'style-loader'
    })
},

Unexpected token 多半是 less 没被正确 loader 处理。若是 vue-cli 2 + ExtractTextPlugin 的老项目，可能要像下面这样显式配一条 .less 规则（vue-cli 3+ 一般不用手改）：