如何解决创建vue项目后没有webpack.config.js(vue.config.js)文件

这篇具有很好参考价值的文章主要介绍了如何解决创建vue项目后没有webpack.config.js(vue.config.js)文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue cli没有config文件夹,Vue.js学习笔记,webpack,vue.js,webpackconfigjs,vue.config.js,config.js

◼️ webpack.config.js文件没有的原因

Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。

vue-cli3 之后创建的时候并不会自动创建 vue.config.js,因为这个是个可选项,所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。

vue-cil3之后创建项目后的目录结构如下:

├── README.md  					# 说明
|-- dist                       	# 打包后文件夹
├── babel.config.js 			# babel语法编译
├── package-lock.json 
├── public						# 静态文件夹,这类资源将会直接被拷贝,而不会经过 webpack 的处理。
│   ├── favicon.ico
│   └── index.html				#入口页面
└── src						    # 源码目录
    ├── App.vue - 页面
    ├── assets  - 静态目录,这类引用会被 webpack 处理。
    │   └── logo.png
    ├── components 组件
    │   └── HelloWorld.vue
    └── main.js                  # 入口文件,加载公共组件
│—— vue.config.js                # 配置文件,需自行配置 
│—— .gitignore          		 # git忽略上传的文件格式   
│—— babel.config.js   			 # babel语法编译                        
│—— package.json       	         # 项目基本信息 
│—— .env       	                 # 环境变量和模式,需自行配置 
│—— .eslintrc.js    		  	 # ES-lint校验          

开发者一般不需要再去知道 webpack 做了什么,所以没有暴露 webpack 的配置文件,但你依然可以创建 vue.config.js 去修改默认的 webpack。

Vue-cli3+ 和 Vue-cli2 的最大区别:在于内置了很多配置,没有 build 文件夹和 config 的配置。但是在开发中,避免不了的还是需要个性化的配置,这里讲一下 vue.config.js 的配置。

◼️ 手动创建一个 vue.config.js

module.exports = {
  publicPath: './',  // 基本路径
  outputDir: 'dist', // 构建时的输出目录
  assetsDir: 'static', // 放置静态资源的目录
  indexPath: 'index.html', // html 的输出路径
  filenameHashing: true, // 文件名哈希值
  lintOnSave: false, // 是否在保存的时候使用 `eslint-loader` 进行检查。

  // 组件是如何被渲染到页面中的? (ast:抽象语法树;vDom:虚拟DOM)
  // template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
  // runtime-only:将template在打包的时候,就已经编译为render函数
  // runtime-compiler:在运行的时候才去编译template
  runtimeCompiler: false,

  transpileDependencies: [], // babel-loader 默认会跳过 node_modules 依赖。
  productionSourceMap: false, // 是否为生产环境构建生成 source map

  //调整内部的 webpack 配置
  configureWebpack: () => { },

  chainWebpack: () => { },

  // 配置 webpack-dev-server 行为。
  devServer: {
    open: true, // 编译后默认打开浏览器
    host: '0.0.0.0',  // 域名
    port: 8080,  // 端口
    https: false,  // 是否https
    // 显示警告和错误
    overlay: {
      warnings: false,
      errors: true
    },
  }
}

◼️ 没有配置vue.config.js之前,打包后的文件如下

注意:此时直接打开index.html文件可能页面的图片没有显示

vue cli没有config文件夹,Vue.js学习笔记,webpack,vue.js,webpackconfigjs,vue.config.js,config.js

◼️ 配置后

注意:此时dist文件底下会创建一个static文件夹(因为vue.config.js中配置了assetsDir属性),用来存放静态文件,如css、js、font、img,

此时,打开index.html文件页面图片可以正常显示

vue cli没有config文件夹,Vue.js学习笔记,webpack,vue.js,webpackconfigjs,vue.config.js,config.js

🎋 参考资料:一文详解vue.config.js 

vue cli没有config文件夹,Vue.js学习笔记,webpack,vue.js,webpackconfigjs,vue.config.js,config.js文章来源地址https://www.toymoban.com/news/detail-762521.html

到了这里,关于如何解决创建vue项目后没有webpack.config.js(vue.config.js)文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Rspack 创建 vue2/3 项目接入 antdv(rspack.config.js 配置 less 主题)

    Rspack CLI 官方文档。 rspack.config.js 官方文档。 创建项目(文档中还提供了 Rspack 内置 monorepo 框架 Nx 的创建方式,根据需求进行选择) 创建好项目并运行,目前 Rspack 版本支持的工程模版: 默认创建的 vue 项目为 vue3 : 如果需要其他版本,或其他框架的基础工程,可到官方提

    2024年02月11日
    浏览(54)
  • React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)

    在 Vue 项目当中,可以使用  @  来表示  src/ ,但在 React 项目中,默认却没有该功能,因此需要进行手动的配置来实现该功能。 别名主要解决的问题:每个页面都使用路径的方式进行引入,这样很麻烦,效率很低,这个时候可以配置一个别名,来直接使用别名引入。 使用

    2024年02月09日
    浏览(45)
  • vue.config.js配置报错——可能是与webpack混淆

    配置vue.config.js时,报错信息 “Invalid options in vue.config.js: ‘module’ is not allowed” ,表示在 vue.config.js 文件中不允许直接配置 module 选项。 在 Vue CLI 3 及以上版本中, vue.config.js 是用于配置 Vue 项目的文件,但是它只允许配置特定的选项,而不是所有的 Webpack 配置选项。其中,

    2024年02月09日
    浏览(38)
  • vue项目使用vite设置proxy代理,vite.config.js配置,解决本地跨域问题

    非同源请求,也就是协议(protocol)、端口(port)、主机(host)其中一项不相同的时候,这时候就会产生跨域 vite的proxy代理和vue-cli的proxy大致相同,需要在vite.config.js文件中配置(打包配置也在此) 代理配置在server中,可以上vite官网服务器选项查看server.proxy代码示例:开发服务器选

    2024年01月21日
    浏览(59)
  • 解决创建的vue项目没有router,view文件夹

    出现问题如图,没有router,view等文件夹 错误原因:创建的vue项目没有router,view文件夹是因为创建项目时的 Please pick a preset: 这个问题选错了,也就是第一个问题 如图所示,选择第三个 接下来的很多选择如图(不详写) 之后创建出来的就有了 ,如图

    2024年02月12日
    浏览(58)
  • webpack 创建VUE项目

    下载地址:https://nodejs.org/en/ 下载完成以后点击安装,全部下一步即可 安装完成,输入命令验证 输入命令,全局安装 安装完成后输入命令 查看 全局安装webpack 输入命令 安装完成输入命令验证 输入命令 进入 到新建项目中,然后输入命令 初始化 然后输入 启动命令 启动完成

    2024年02月13日
    浏览(40)
  • vue项目的vue.config.js在打包过程中,并不会处理api请求。

    主要处理打包选项和静态资源文件 请求是axios处理的  

    2024年02月16日
    浏览(45)
  • vue3项目vite.config.js配置“代理”、“端口”、“打包名”、“图片压缩”

    前言 我们在搭建vue3项目的时候不可避免的会遇到“代理”、“端口”、“打包名”、“图片压缩”等配置问题,本文逐一讲述该怎么样在vite.config.js中去配置。 一、配置代理端口和代理转发 vite.config.ts添加如下代码 ts.config.json添加如下代码 图片压缩先要引入vite-plugin-imagem

    2024年02月07日
    浏览(82)
  • vue ui 创建项目没有反应

    cmd中输入 vue ui 没有反应 vue ui命令需要vue3.0以上的版本 才可以 1、查看当前版本 vue版本在3.0以下是没有ui命令的 2、查看版本所拥有的命令  3、卸载之前版本的vue 卸载完成,检查是否已经卸载  4、安装@vue/cli  等待安装...... 5、检查是否安装成功,查看版本 查看vue命令中是否

    2024年02月11日
    浏览(49)
  • proxy代理不生效、vue config.js不生效解决方法

    axios默认请求接口就是localhost,所以这里需要更改 axios设置的默认请求设置 在 main.js 文件里,设置 vue.config.js文件夹要和src在同级别下 在这里面 /api 就相当于 \\\' http://localhost:8080/ \\\' 所以接下来接口需要添加的的url参数不需要再写接口的域名 要是在不行就把请求头加上 springboo

    2024年01月17日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包