Vue项目中根目录文件夹配置详解（4）build文件、config文件

最新推荐文章于 2024-06-20 10:26:21 发布
最新推荐文章于 2024-06-20 10:26:21 发布
阅读量3.3k 收藏 8
点赞数 4
分类专栏： vue的使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37734787/article/details/110181606
版权

build（项目构建(webpack)相关代码）

其它博客介绍
在这里插入图片描述

  • build.js > 生产环境构建配置脚本
  • check-versions.js > 用来检查npm，node.js版本
  • utils.js > vue开发环境的webpack相关配置文件
  • vue-loader.conf.js > 配置了css加载器以及编译css之后自动添加前缀
  • webpack.base.conf.js > webpack 基础配置
  • webpack.dev.conf.js > webpack 开发环境配置
  • webpack.prod.conf.js > webpack 生产环境配置

config

  • dev.env.js > 开发环境的各种变量设置
  • prod.env.js > 生产环境的各种变量设置
  • index.js >当我们需要和后台分离部署的时候，必须配置config/index.js；用vue-cli 自动构建的目录里面 （环境变量及其基本变量的配置）
  • 项目的配置文件
小也同学
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目二、vue-cli2.x脚手架搭建build文件夹及config文件夹详解
weixin_30511107的博客
05-07 1101
build文件夹下 build.js 'use strict' // js的严格模式 require('./check-versions')() // node和npm的版本检查 process.env.NODE_ENV = 'production' /...
vue打包配置的详细说明【config/index.js的build部份】
ying940718的博客
01-07 4373
index: path.resolve(__dirname, '../dist/index.html') 打包生成的文件路径 __dirname：代码所在路径，字符串格式 assetsRoot: path.resolve(__dirname, '../dist'), 包含应用程序的所有静态资产的根目录（绝对路径） assetsSubDirectory: 'static', 被编译之后的资源...
vue项目基础架构
weixin_46767144的博客
09-24 281
Vue项目二、vue-cli2.x脚手架搭建build文件夹及config文件夹详解 build文件夹下 build.js 'use strict' // js的严格模式 require('./check-versions')() // node和npm的版本检查 process.env.NODE_ENV = 'production' // 设置环境变量为生产环境 // 导进
Vue项目的详细目录结构解析
最新发布
weixin_45131680的博客
06-20 570
我们在使用Vuevue-demo├── dist //项目构建后的输出目录├── public├── src├── tests //选装：测试模块├── ...dist—— 项目构建打包后的默认输出目录。查看详情 ->—— 项目依赖文件，其中包括很多基础依赖和自己安装的依赖。查看详情 ->public—— 存放公共资源和项目的主入口文件index.html。查看详情 ->src—— 项目核心文件夹：包括项目源码，各种静态资源等等。是我们开发的重点工作目录。查看详情 ->test。
vue.config.js配置文件（build包通用）
TurtleOrange的博客
02-25 1991
vue.config.js配置文件 const path = require('path') const resolve = dir => path.resolve(__dirname, dir) const webpack = require('webpack') module.exports = { /* # # 基本路径 */ publicPath: process.env.NODE_ENV === 'production' ? './' : '/', /* # # 输
VUE项目中config/index.js 里面的 build配置
weixin_44163210的博客
09-03 1923
index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', ----------------------------------- index: 模板 assetRoot: 打包后文件要存放的路径 assetsSu...
如何配置vue.config.js 处理static文件夹下的静态文件
10-15
总之，通过`vue.config.js`配置`copy-webpack-plugin`，我们可以确保`static`文件夹下的静态文件在构建过程中得到正确处理，避免了因未引用而被忽略的问题。这个方法对于处理动态加载的外部数据文件或其他不希望被...
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
01-21
1.在vue项目根目录下新建vue.config.js（不是在src下面） vue.config.js配置文件： module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader...
vue 文件目录结构详解
11-26
4. **config** - 项目配置，包含不同环境的配置文件，如开发环境(`dev.env.js`)、生产环境(`prod.env.js`)和测试环境(`test.env.js`)的环境变量。 5. **mock** - Mock数据目录，用于在开发阶段模拟后端API的数据，...
Vue-cli3项目配置Vue.config.js实战记录
10-18
相比之前的版本，Vue CLI 3 在项目结构上进行了简化，不再包含 `build` 和 `config` 文件夹，而是将大部分配置集中到了 `vue.config.js` 文件中。这个文件位于项目的根目录下，允许开发者自定义 Webpack 配置，以...
Vue2.5.9源码解读(2) — build/config.js
事非宜，勿轻诺；苟轻诺，进退错。
11-28 647
genConfig根据指定的process.env.TARGET与builds中的键做对比，如果在builds中存在对应的键，则生成并对应的配置。这里并没有做指定的process.env.TARGET不存在于builds中的处理。
BuildConfig方法二
12-25
BuildConfig.DEBUG总是返回false的解决方法
Vue-cli3项目之Vue.config.js配置文件—取代vue-cli2中build与config
青春木鱼的博客
07-28 1801
Vue-cli3项目之Vue.config.js配置文件—取代vue-cli2中build与config
vue脚手架 build-config文件夹（跨域/打包）相关配置
Jack, what else can you do besides holding your little darling?
11-17 1675
本文章向大家介绍vue脚手架 build-config文件夹（跨域/打包）相关配置，主要包括vue脚手架 build-config文件夹（跨域/打包）相关配置使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。 1,跨域解决 点开config文件夹下的index.js文件 找到proxyTable（英文：代理-表格）下进行配置，如下（路径配置必须绝对路径） build:{ // production 环境 env: require('./pr.
vue 构建根组件_为Vue构建的简单上下文菜单组件
cuk5340的博客
07-25 684
vue 构建根组件 Vue简单上下文菜单 (vue-simple-context-menu) Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use. 为Vue构建的简单上下...
vue 脚手架 （三，配置文件config, build目录）
weixin_30612769的博客
02-21 6966
本文以转移至本人的个人博客，请多多关注！ 本文以转移至本人的个人博客，请多多关注！ 本文以转移至本人的个人博客，请多多关注！ 本文以转移至本人的个人博客，请多多关注！ 上篇文章咱们介绍了vue webpack 脚手架使用的依赖。 接下来咱们介绍一下此脚手架的配置文件，主要就是config，build目录下面的文件。 项目的整体结构可以参照第一篇文章（vue webpa...
Vue-cli3项目配置Vue.config.js (替代vue-cli 2 的build config)
南孔小书童的博客
05-14 957
vue-cli 3将vue-cli 2中的build和config文件夹去除了，为了配置webpack，故需要在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录） 以下是代码的搬运工 (转载自https://www.cnblogs.com/duanzb/p/10715538.html) 语法 module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputD...
Webstorm2021 创建VUE工程
moranrun的博客
06-22 2638
1首先创建一个新的Vue工程，选择node.exe和cli vue，直接点击create。 2. 执行vue init webpack命令，生成基本目录结构，当中需要填写一些基本信息，我这边一概选Y(简单点来..) 3. 执行命令，切换国内镜像：npm config set registry https://registry.npm.taobao.org 4. 执行命令，npm install(切换到国内镜像的话，下载比较快一点)，完成后目录结构如下： 5. 执行 npm run de.
vue项目结构及文件介绍(2) —— build文件夹
热门推荐
luwenze的博客
04-21 1万+
build文件夹里面是对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等； build.js文件 构建环境下的配置:loading动画、删除创建目标文件夹、webpack编译、输出信息 'use strict' // js的严格模式 require('./check-versions')() // node和npm的版本检查 process.env.NODE_ENV...
vue3项目中webpack.config.ts文件配置
05-13
在 Vue3 项目中，我们通常使用 Vue CLI 来创建和配置项目，而不是手动修改 webpack 配置文件。Vue CLI 会自动生成一份 webpack 配置文件，我们可以通过 `vue.config.js` 文件来修改这份配置。 如果你还是想手动修改 webpack 配置文件，那么可以按照以下步骤进行操作： 1. 安装 `@vue/cli-service` 和 `@vue/compiler-sfc`： ``` npm install --save-dev @vue/cli-service @vue/compiler-sfc ``` 2. 在项目根目录下创建一个 `webpack.config.ts` 文件，并添加以下内容： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue() ], resolve: { alias: { 'vue': '@vue/runtime-dom' } } }) ``` 上面的配置中，我们使用了 `vite` 的 `defineConfig` 函数来定义配置，引入了 `@vitejs/plugin-vue` 插件以支持 Vue 单文件组件的编译和解析，同时通过 `alias` 配置将 `vue` 模块指向了 `@vue/runtime-dom`。 3. 修改 `package.json` 文件中的 `scripts` 字段，添加以下内容： ```json "scripts": { "serve": "vue-cli-service serve --config webpack.config.ts", "build": "vue-cli-service build --config webpack.config.ts" } ``` 上面的配置中，我们使用了 `vue-cli-service` 命令来启动开发服务器和构建项目，并通过 `--config` 选项指定了使用我们自己定义的 webpack 配置文件。 现在你就可以通过 `npm run serve` 启动开发服务器，或者通过 `npm run build` 构建项目了。请注意，手动修改 webpack 配置文件可能会导致一些不兼容的问题，建议在修改之前备份原有的配置文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值