Vue CLI4.x如何打包到指定文件夹，及静态资源打包到static文件夹

最新推荐文章于 2024-07-09 16:31:58 发布

松本文纪

最新推荐文章于 2024-07-09 16:31:58 发布

阅读量6.8k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/jywhpu0612/article/details/105990738

版权

本文介绍了如何在Vue CLI4.x中将项目打包到指定文件夹，并将静态资源打包到static文件夹。作者建议参考官方文档来配置vue.config.js，提供了Vue CLI配置的参考链接。

摘要由CSDN通过智能技术生成

被这个问题所困，闲着没事想着看看文档。。。顿时恍然大悟

可以使用vue.config.js配置大多数你可能会用到的配置。建议直接参考官方文档/(ㄒoㄒ)/~~。
附上Vue CLI配置参考地址https://cli.vuejs.org/zh/config/
注意
在这里插入图片描述

好了，下面进入正题。

这是我暂时用到的一些配置

module.exports = {
   
  //基本路径
  publicPath: "./",
  //outputDir: "dist", 构建时输出目录 默认dist
  //放置静态资源目录
  assetsDir:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

松本文纪

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

详解Vue-cli中的静态资源管理（src/assets和static/的区别）

12-04

你可能注意到了我们的静态资源共有两个目录src/assets和static/，你们它们之间有怎样的区别呢？资源打包为了回答这个问题，我们需要了解webpack是如何处理静态资源的。在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在 img src=”./logo.png” 和background: url(./logo.png) 中./logo.png是一个相对资源路径，并且会被Webpack视为一个模块依赖来解析。因为./logo.png并非一个Javascript，当将它

vue系列之项目打包

02-22

496

vue完成项目后，如何打包成静态文件，并且用Node调试打包 1、修改config里面的index.js里面的productionSourceMap为false,默认情况是true（true代表打包环境是开发环境，可以进行调试；false表示生产环境，正式上线的） 2.在cmd里面运行npm run build,(运行的是build里面的build.js文件) 生成的包放在di...

参与评论您还未登录，请先登录后发表或查看评论

Vue下载本地静态资源static文件夹中的.xlsx .docx

最新发布

qq_28170105的博客

07-09

580

下载模板

Vue3打包将静态文件打包到static目录下

weixin_43496695的博客

02-05

4052

VUE3打包将静态文件打包到static目录下Vue3打包将静态文件打包到static目录下 Vue3打包将静态文件打包到static目录下 1、查看项目根目录下有没有vue.config.js文件，如果没有则创建该文件 2、在vue.config.js文件下输入 module.exports = { presets: [ ‘@vue/cli-plugin-babel/preset’ ] } 3、打包项目：npm run build即可完成打包后目录结构： ...

vue-cli4 无法访问static资源问题

qq_21121821的博客

06-03

1608

module.exports = { // 基本路径 publicPath:"./", // 可以设置成相对路径，这样所有的资源都会被链接为相对路径，打出来的包可以被部署在任意路径 outputDir:"dist", //打包时生成的生产环境构建文件的目录 assetsDir: 'public', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 } ...

vue项目打包时如何将静态文件打包到一个单独的文件夹

phplife的电子商务网上商城专栏

09-17

3081

vue项目打包时如何将静态文件打包到一个单独的文件夹

如何配置vue.config.js 处理static文件夹下的静态文件

10-15

在Vue.js应用开发中，尤其是使用Vue CLI 3.x或更高版本时，有时我们需要处理`static`文件夹下的静态资源，比如图片、字体文件或JSON数据。这些文件不会被webpack自动处理，因此需要进行额外的配置。本文将详细介绍...

vue-cli2.x项目优化之引入本地静态库文件的方法

08-27

vue-cli2.x项目优化之引入本地静态库文件的方法本文主要介绍了 Vue-cli 2.x 项目优化方法之一，即引入本地静态库文件的方法。该方法可以有效地优化项目的编译速度和文件大小。首先，需要将 node_modules 下相应...

vue cli3.0打包上线静态资源找不到路径的解决操作

10-15

在使用 Vue CLI 3.0 进行项目打包时，可能会遇到静态资源（如图片、CSS、JavaScript 文件等）找不到路径的问题。这个问题通常出现在部署到服务器后，因为本地开发环境与线上环境的资源路径不同。以下是如何解决这个...

vue-cli3访问public文件夹静态资源报错的解决方式

10-14

总结以上知识点，当你在Vue CLI 3项目中遇到public文件夹静态资源报错的问题时，应该首先检查你的资源引用路径是否正确。根据你的项目部署路径，设置合适的`process.env.BASE_URL`环境变量，然后通过`vue.config.js`...

VUE-CLI3项目打包配置优化

weixin_43990297的博客

02-01

670

在项目开发完成后，就会进行打包部署，有的时候项目开发过程中，代码写的比较臃肿或者各种包引用的比较多，就会造成打包后包的体积变大，导致部署后访问速度比较慢。下面就记录下自己在项目中的一些配置来进行优化这些问题。通过 npm run build --report 命令（好多贴中都是借助webpack-bundle-analyzer帮助分析，不用安装这个，使用前面那个自带命令就好）会在打包后的文件夹内生成一个report.html文件，打开会就是各种打包后文件大小的分析页面，我们可以看到生成的最大文件为c

vue 配置static文件夹下的静态文件

REal_201903的博客

09-01

1450

vue静态文件配置

Spring Boot+Vue项目打包部署

热门推荐

zhouym_的博客

09-05

2万+

在前后端分离的项目中，最后前后端项目开发完毕都需要进行打包部署发布到服务器上面运行，所以需要对前端开发的项目进行打包，然后将打包后的文件放在spring boot项目中的resource/static目录下面前端项目点击edit configuration进入run/debug configuration页面，点击+号，选择npm，name随便起，这里我们就用build好了，见名之意，在执行...

vuecli4 启动_vue-cli4 全面配置(持续更新)

weixin_39615991的博客

12-20

1076

https://github.com/staven630/vue-cli4-configgithub.comvue-cli4 全面配置(持续更新)细致全面的 vue-cli4 配置信息。涵盖了使用 vue-cli 开发过程中大部分配置需求。不建议直接拉取此项目作为模板，希望能按照此教程按需配置，或者复制 vue.config.js 增删配置,并自行安装所需依赖。vue-cli3 配置见 vue-...

vue 配置打包后在static文件下的config.js配置文件，可在服务器找到文件更改,作用于整个项目

aadyf的博客

02-25

5278

前言：此示例需要使用vuex，来存储获取参数，所以使用前请先安装插件(此方法适用需要修改参数较多时使用) 一、首先在static文件下创建“config.js”，这个文件打包后不会被编译，所以放在这里方便在服务器上准确找到对应文件修改参数，如图：二、在main.js中配置configjs的链接 import axios from 'axios'; let myConfigPath = "/wechat/static/config.js" if (process.env.NODE_E..

vue打包路径和服务器配置

m0_67593693的博客

06-27

1542

【代码】vue打包路径和服务器配置。

vuecli4中配置打包使用相对路径

sun_chen_93的博客

07-29

1798

元气满满，直接干！使用vuecli4进行项目打包时，默认使用的是根目录的方式，这样打包直接项目直接运行就是一个大白屏，非常难受！这时我们就需要在设置打包使用相对目录的方式，设置过程非常简单。 1. 在vuecli跟目录下添加 `vue.config.js`作为配置文件 2. 添加以下配置： module.exports = { //配置运行和打包时的文件路径 publicPath:process.env.NODE_ENV==='production'?'./':'/', devSer

vue项目打包部署-手把手教程

Accustomed_的博客

02-17

2995

手把手教你将一个vue项目打包部署到服务器上

Vue CLI 4.x 中 vue.config.js配置服务，输出和打包

05-18

在 Vue CLI 4.x 中，可以通过 `vue.config.js` 配置文件来配置开发服务、输出和打包等相关配置。以下是一些常见的配置项： ### 开发服务配置 ```javascript module.exports = { devServer: { port: 8080, // 端口号 open: true, // 自动打开浏览器 hot: true, // 开启热更新 proxy: { // 配置代理 '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` ### 输出配置 ```javascript module.exports = { outputDir: 'dist', // 输出目录 assetsDir: 'static', // 静态资源目录 publicPath: '/', // 部署应用包时的基本 URL indexPath: 'index.html', // 指定生成的 index.html 的输出路径 filenameHashing: true, // 文件名哈希值 productionSourceMap: false, // 生产环境下是否生成 source map } ``` ### 打包配置 ```javascript module.exports = { configureWebpack: { // 配置 webpack plugins: [ new MyPlugin() ] }, chainWebpack: config => { // 配置 webpack 链式操作 config.module .rule('images') .use('url-loader') .tap(options => Object.assign(options, { limit: 5120, // 图片大小限制 }) ) } } ``` 更多配置项可以参考官方文档：[https://cli.vuejs.org/zh/config/#vue-config-js](https://cli.vuejs.org/zh/config/#vue-config-js)。