vue cli 3 配置 webpack alias

最新推荐文章于 2022-07-12 10:24:00 发布
最新推荐文章于 2022-07-12 10:24:00 发布
阅读量296 收藏 1
点赞数
文章标签： webpack javascript json ViewUI
原文链接：https://juejin.im/post/5bd80cac518825295165b87c
版权

vue cli 3的各项配置在node_modules里面

要对各项配置自定义
在项目根目录，和package.json文件同级，创建vue.config.js文件
写入代码如下：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'xxx': '@xxx/xxx',
      },
    },
  },
};
复制代码

转载于:https://juejin.im/post/5bd80cac518825295165b87c

weixin_34284188
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解基于vue-cli优化的webpack配置
01-21
关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释，有助于更好的理解webpack。 仔细总结了一下，自己的优化基本还是网上流传的那几点 通过 ...
vue-cli3中配置alias和打包加hash值操作
11-19
1.之前在项目测试环境打包的...2.配置alias可以在引入文件的时候不用写很长的相对路径 步骤： 先引入path模块 const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } 之后在ch
vue-cli3之webpack配置
flym_的博客
03-08 7548
vue-cli 3 中文文档 webpack-chain vue.config.js官方配置指南 当我们项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件，可能一时会觉得无从下手，其实是vue-cli3在我们项目初始化的时候，就已经帮我们初...
vue-cli3搭建项目之webpack配置
怎么办我好菜啊
01-24 3232
vue-cli3搭建项目之webpack配置 一、vue.config.js文件 const path = require('path') module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 lintOnSave: false, // eslint-loader 是否在保存的时候检查 // see https://github.com/vuejs/vue-cli/blob/dev/docs/we
vscode 在标签的src引入别名路径_vue-cli 3.0配置webpack目录别名alias
weixin_39938875的博客
11-25 475
前言在Vue项目开发中，经常需要引入不同文件目录的组件，通常我们是通过“import 组件名 from ‘组件路径’”的结构来实现对组件的引用，而当文件路径较深或者引用的组件跨越的较远时很容易引用出错，这里我们就要引入alias概念了，“别名”的意思，顾名思义标准名称以外的名称。 查看webpack配置我们在引入模块的时候经常会用到一个@符号，用@符号指代根目录下的src文件夹路径，@+/就可以获...
Vue.config常用配置项
甘乐2333的博客
08-02 543
只需要在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录） const path = require('path') module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 lintOnSave: false, // eslint-loader 是...
vue-cli 为项目设置别名的方法
12-13
1.使用场景：在项目开发过程中经常需要引入各种文件，例img，css，js等，我们可以在vue-cli中给不同目录设置别名，方便我们使用 2.vue-cli 2x 配置 // 在 webpack.base....3.vue-cli 3x 配置 // 在根目录下创建vu
vue 关于webpack配置的几个优化
01-08
由于vue-cli3将webpack的基础配置全部内嵌了，这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了，那该怎么办呢？别慌，vue-cli3早就考虑到了这一点，它预留了一个vue.config.js的js...
vue-cli webpack2项目打包优化分享
11-30
Webpack的resolve.modules配置模块库（即 node_modules）所在的位置，在 js 里出现 import ‘vue’ 这样不是相对、也不是绝对路径的写法时，会去 node_modules 目录下找。但是默认的配置，会采用向上递归搜索的方式...
webpack3.0基础配置项目
07-11
webpack3.0基础配置，希望对大家有帮助，仅供才考，共同学习。
webpack-Vue CLI 3 的配置方法
火腿肠的博客
07-29 178
小白什么都不用考虑直接运行 想要配置需要的操作 在根目录下创建vue.config.js文件 依据vueWebpack配置来改即可：Vue-Lii配置官网 本质就是webpack的二次封装 通过转化变成webpack可识别的参数 也可以通过configureWebpack实现原生webpack // vue.config.js module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin()
webpack中alias的配置
LIS606的博客
08-05 1521
对alias配置的目的是为了减少后续引用路径的复杂性。 配置的方式为： // 在vue.config.js文件中 const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { configureWebpack: { // provide the app's title in webpack's name field, so t
Vue Cli 3.0 配置webpack的别名alias
smildwind的博客
08-25 487
我们使用webpack的时候,一般配置alias 是在 webpack.config.js vue cli 2.0 里呢 是在 \build\webpack.base.conf.js 但是在 vue cli 3.0 里呢,这个配置一并放在了 vue.config.js 下面贴配置代码: vue.config.js const webpack = require("webpack"); const resolve = dir => require('path').join(__dirname, di
configureWebpack两种格式配置alias别名
yixiancheng的博客
07-12 368
以对象形式 configureWebpack: { resolve: { alias: { '@assets': resolve('src/assets') } } }, 以函数形式 configureWebpack: config => { if (isProduction) { ... ...
vue-cli 3.0详解以及配置webpack目录别名alias
木雷双雄7
02-14 4999
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 B...
Vue Cli 中 Webpack 配置的3种写法
GeekAaron的博客
10-24 1860
很多时候，vue-cli默认的webpack配置并不能满足项目需求，比如需要解析markdown文件为页面。这时，便可以在vue.config.js中设置webpack。 参考vue-cli的官方教程，我们可以看到有2种方式可以对webpack进行修改： configureWebpack 简单配置 chainWebpack 链式操作 以使用自定义loader解析markdown文件并修改@别名...
webpack alias 设置
weixin_30448603的博客
03-30 249
function resolve (dir) { return path.join(__dirname, '..', dir) } resolve: { extensions: ['.js', '.vue', '.json','.styl'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('...
vue-cli 3.X webpack配置( 主要实现 resolve.alias的配置)
热门推荐
bowen11233的博客
05-17 2万+
近期有新项目开发，使用vue-cli3.7进行项目构建，形式上跟vue-cli2.x 区别还是蛮大的。最主要的就是生成的项目中，进行webpack配置的文件没有了。这是因为在这个版本的cli中，作者将绝大部分相同的webpack配置，已经封装到cli的安装包中。我们可以打开 node_modules/_@vue_cli-service@3.7.0@@vue/cli-service文件夹看一下，...
vue cli 如何配置webpack
最新发布
08-14
### 回答1： Vue CLI 提供了一种叫做 vue.config.js 的配置文件，用来配置 webpack。 在项目根目录下新建一个 vue.config.js 文件，在其中进行 webpack 的配置。 示例： module.exports = { configureWebpack: { // 添加 webpack 配置 } } 可以在 configureWebpack 中使用 webpack-chain 来配置。 示例： module.exports = { configureWebpack: config => { config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { // 修改配置 return options }) } } 更多关于 vue.config.js 的用法和 webpack 的配置请参考 Vue CLI 官方文档。 ### 回答2： Vue CLI 是一个构建 Vue.js 项目的脚手架工具，它集成了 webpack，可以简化项目配置过程。配置 webpack 可以让我们根据项目需求，进行一系列额外的定制操作。 首先，我们需要通过 npm 或者 yarn 全局安装 Vue CLI。在命令行中输入以下命令： ``` npm install -g @vue/cli ``` 或者 ``` yarn global add @vue/cli ``` 安装完毕后，我们可以使用 `vue create` 命令创建一个新的 Vue 项目。 ``` vue create my-project ``` 在创建项目的过程中，可以选择手动配置功能。选择手动配置后，我们可以自定义项目的特性和插件。 最重要的一部分就是 webpack 的配置了。Vue CLI 会生成一个 `vue.config.js` 文件，我们可以在该文件中进行 webpack 的配置。 以下是一个简单的例子： ```javascript module.exports = { configureWebpack: { resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } } } ``` 上述配置中，我们使用 `configureWebpack` 字段来配置 webpack。在这个例子中，我们将 `vue` 的默认引入方式设置为了完整的构建版（vue.esm.js ）。 除此之外，还可以通过 `chainWebpack` 配置来进一步定制 webpack。`chainWebpack` 接收一个函数，该函数接收一个 `config` 参数，我们可以在该函数中对 `config` 进行操作。 以下是一个使用 `chainWebpack` 配置修改 webpack 输出路径的例子： ```javascript module.exports = { chainWebpack: config => { config.output .filename('assets/js/[name].[hash:8].js') .chunkFilename('assets/js/[name].[hash:8].js') } } ``` 上述配置中，我们将 webpack 输出的文件路径设置为了 `assets/js/[name].[hash:8].js`。 除了这些示例之外，我们还可以根据具体的需求进行更复杂的 webpack 配置，比如添加插件、设置 loaders 等等。 总的来说，通过 Vue CLI 的 `vue.config.js` 文件，我们可以方便地对 webpack 进行配置，定制化我们的项目。 ### 回答3： Vue CLI 是一个用于快速搭建 Vue.js 项目的脚手架工具，它包含了一个已经预先配置好的 webpack 构建系统。但是，如果你需要对 webpack 进行自定义配置，Vue CLI 也提供了相应的方式来实现。 首先，你可以通过在项目根目录下创建一个 `vue.config.js` 文件来进行配置。在这个文件中，你可以使用 Node.js 导出一个对象，该对象包含了你的自定义配置。比如，你可以修改 webpack 的一些配置选项，添加自定义的 loader 或者 plugin。 以下是一个 `vue.config.js` 的示例： ```javascript module.exports = { // 修改 webpack 配置 configureWebpack: { // 添加自定义的 loader module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, // 添加自定义的 plugin plugins: [ new MyPlugin() ] }, // 配置 devServer 选项 devServer: { // 代理：将请求代理到指定的后端服务 proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } } ``` 在上述示例中，`configureWebpack` 字段用于修改 webpack 配置，`devServer` 字段用于配置开发服务器。你可以根据自己的需求进行相应的配置。 另外，Vue CLI 还提供了一些与 webpack 相关的命令行选项，例如 `--mode` 用于指定构建模式，`--modern` 用于启用现代模式构建等。你可以通过在命令行中使用这些选项来实现更详细的配置。 总而言之，通过 `vue.config.js` 文件和命令行选项，你可以对 Vue CLI 使用的 webpack 进行自定义配置，以满足你项目的需求。祝你使用愉快！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值