vue-cli 3.0详解以及配置webpack目录别名alias
·
vue-cli 3.0安装
安装命令:
npm install -g @vue/cli
如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x),
卸载命令:
npm uninstall vue-cli -g
检查其版本是否正确 (3.x):
vue --version
vue -V
创建一个新项目:
vue create hello-world
windows上的Git Bash交互不是很友好,需要通过
winpty vue.cmd create hello-world
启动上下键选择,space键选中
现有的项目中安装插件:vue-cli-plugin-cube-ui
vue add cube-ui
启动
启动项目:
npm run serve
配置webpack目录别名alias
使用vue.config.js(根目录,默认不存在,需要创建)来配置webpach的一些配置项
链式操作
webpack-chain
尝试通过提供可链接或流畅的API来创建和修改webpack配置来改进此过程。
设置别名的结构:
config.resolve.alias
.set(key, value)
.set(key, value)
.delete(key)
.clear()
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack(config) {
config.resolve.alias
.set('components', resolve('src/components'))
.set('common', resolve('src/common'))
.set('api', resolve('src/api'))
}
}
注意:
各类非 js 直接引用(import require)静态资源,依赖相对路径加载问题,都可以用 ~ 语法完美解决;
更多推荐
已为社区贡献1条内容
所有评论(0)