vue-cli构建的vue项目打包配置

最新推荐文章于 2024-09-13 14:55:21 发布
最新推荐文章于 2024-09-13 14:55:21 发布
阅读量643 收藏 1
点赞数
分类专栏： vue 文章标签： vue vue-cli 打包 脚手架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WebDestiny/article/details/100100400
版权

vue-cli构建的vue项目打包配置

一:在项目中打开config文件夹中的index.js文件，如下图所示：
在这里插入图片描述
二：在该文件中的的build:{…}中修改，目的是为了定义打包后的文件名，以及保证打包后的图片路径可以被正常显示。相关配置如下图所示。
在这里插入图片描述
其中的name为自定义的文件名，名字上下要统一，assetsPublicPath: ‘./’, 将路径修改为./ 是为了保证打包之后图片路径能被正常解析。

三： 修改build 文件夹下的 utils.js文件，如下图所示。
在这里插入图片描述
此处只需添加一句 publicPath:’…/…/’ 即可。

春风欲雨
关注
专栏目录
Vue项目部署
demo34的博客
07-12 575
使用nginx部署vue项目
详解vue-cli构建项目反向代理配置
01-19
本文介绍了vue-cli构建项目反向代理配置，分享给大家，具体如下： proxyTable: {//配置请求代理 '/dlsys':{ target:'http://192.168.16.209:81', changeOrigin:true, pathRewrith:{ '^/dlsys': '/dlsys' } }, '/...
vue 项目中的打包配置
第⑦个前端
05-30 4934
当我在使用vue 项目的时候， 我们可能会打包一下线上环境发布， 一会又在本地启动， 因为线上的环境要放在站点根目录下的二级目录中， 而我们的测试环境只是在 ./ 的根目录下， 所以， 当我要打包的时候， 我一般的会更改文件的三个地方 一. vue.config.js 文件中的 publicPath 配置项 二. 修改 vue 的路由文件的 router.js 三. 在我封装的 请求类中 http.js中的 axios 配置修改 上面这样 打开后又注释真是麻烦 后来我使用了 process.
vue2 webpack打包配置
最新发布
m0_46159356的博客
09-13 700
webpack打包后出现的问题以及解决方案
vue项目打包配置
qq_52960986的博客
06-09 161
vue-cli4项目配置cdn引入静态资源 参考 项目打包配置 1、项目上线后端允许跨域 2、路由模式设置为hash 2、项目优化 路由懒加载 图片懒加载 v-if 和v-for不要使用在同一个标签 移除console.log() https://blog.csdn.net/qq_25003027/article/details/111245687 使用CND资源 vue vue-router elementUI vant axios swiper 配置两个入口文件（判断是开发阶段还是生产阶段走不同的入口
vue-cli3中配置alias和打包加hash值操作
10-14
本文将深入探讨如何在 Vue CLI 3 中配置 `alias` 和添加 `hash` 值到打包文件名。 首先，我们来关注 `alias` 的配置。在开发大型应用时，我们常常需要引入大量的模块和文件，这时相对路径可能会变得非常冗长。`...
用Vue-cli搭建的项目中引入css报错的原因分析
08-29
4. Vue-cli项目中，使用ElementUI库时需要在webpack.base.conf.js文件中配置对应的loader，以便正确地引入css文件。 5. 在开发Vue-cli项目时，需要注意css文件的路径问题，正确地配置css文件的路径可以避免许多报错...
vue-cli开发的商城源代码
01-18
在这个"vue-cli开发的商城源代码"项目中，我们可以看到一系列与前端开发、Vue.js 框架以及构建电商平台相关的知识点。 首先，`vue.js` 是一个轻量级的前端框架，由尤雨溪开发，它的核心特性包括组件化、虚拟DOM、...
vue项目打包之开发环境和部署环境的实现
11-21
项目开发阶段和生产环境可能不一样 如前端在开发阶段，接口可能是自己使用 node.js 搭建的服务器，API 返回的也都是假数据，等后台接口开发好后，再切换成后台提供的接口，等测试没有问题，服务端上线后，又要改成正式的接口 手动改动接口，既繁琐又容易出错（当然，区别还不止这些） 优雅的解决方案是，分别使用两个入口文件，一个用于开发环境打包，一个用于生产环境打包 具体来说，分为下面几个步骤 1、创建入口文件 在 src 目录下新建 prod_env.js 和 dev.env.js 将main.js 中代码分别拷贝到这两个文件中，并删除 main.js 2、配置打包时的入口文件 项目根目录下新建
vue-cli基本npm命令
09-12
vue-cli基本npm命令,包括项目搭建、依赖安装、依赖部署等
vue项目webpack打包配置
weixin_43697548的博客
05-06 4789
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(12)前言一、webpack配置1.配置vue.config.js2.配置DllPlugin提高构建和打包速度二、打包验证总结 前言 一、webpack配置 1.配置vue.config.js publicPath: './', outputDir: 'dist', assetsDir:"static", indexPath:'index.html', 2.配置DllPlu.
Vue项目的打包详解和配置文件
Black_snow_ji的博客
07-13 2840
项目打包 一、项目打包指令 把vue项目进行打包发布，生成可以在web服务器中进行访问的网页 npm run build 二、详解 我们写的.vue文件是源代码，是不能被浏览器解析的 我们在开发的时候使用了cli脚手架生成项目,当执行npm run server的时候 cli搭建的项目会自动启动内置的开发服务器,是临时的一个服务器,会把把我们写的vue文件进行编译运行 .vue文件在开发的时候能够在浏览器被访问到，是因为有webpack的存在 webpack是一个前端模块化开发工具，可以实现模块化
vue.config.js最小化配置代理
zongxing
12-29 333
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。 以下为代理到某个服务的最小化代码配置，以解决前端跨域问题 module.exports= { devServer: { proxy: { '/baidu': { target:'...
Vue项目的打包部署
程小白的博客
08-19 1393
一.当前开发模式 前后端分离的开发模式 前端和后端开发人员开发好后，要将前端项目和后端项目分别打包部署在前端服务器和后端服务器上。而当前最为流行的前端服务器为nginx。 二.打包 这样就完成了打包，打包完成后只需要将dist下面的资源部署在服务器上。 打包后的文件 三.部署 官网上下载 下载稳定版。 解压安装在一个没有中文和空格的目录下。 安装完成后打开所在文件夹，其文件夹功能介绍如下： 我们的项目文件（dist中的文件，为静态资源）就要拷贝到html文
vue打包配置
紫月7575的博客
10-13 175
通用的css文件在main.js中统一引用,且放到最前面(不要在多个文件中引用,局部的在局部页面中引用即可),打包的时候就不会生成map文件,打包速度也会提升很多;
Vue打包时配置
我的
12-19 760
#打包apk #修改路劲 router下加入 mode: 'hash', 服务器用 mode: 'history', #修改 confg文件夹下index.js  assetsPublicPath: '/'，改为'./' #修改 build文件夹下,utils.js    publicPath: '../../'...
Vue-cli快速搭建与Webpack打包详解
本文将详细介绍如何利用vue-cli快速构建Vue应用程序，并实现Webpack的打包过程。Vue是一个流行的渐进式JavaScript框架，它以组件化和数据驱动为核心理念，使开发者能够构建高效、灵活的用户界面。vue-cli是Vue官方...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值