webstorm通过webpack打包vue项目

最新推荐文章于 2024-10-31 16:55:31 发布
最新推荐文章于 2024-10-31 16:55:31 发布
阅读量7.3k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： web前端 文章标签： vue vue项目打包 webpack webstorm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41320468/article/details/90169192
本文详细介绍如何在Vue项目中正确设置assetsPublicPath属性，确保静态资源路径正确，避免使用history模式导致的路由问题，以及如何修改index.html中的资源引用路径。

1，打包之前需要修改一个配置文件，即config目录下的index.js,找到index.js文件中的build模块，将assetsPublicPath:’ / ’ 改为 assetsPublicPath:’. / ’
assetsPublicPath属性作用是指定编译发布的根目录，’ / ’ 指的是项目的根目录,’ . / ’ 指的是当前目录
拿webStorm通过vue-cli构建的项目为例：
在这里插入图片描述
2，控制台输入命令行npm run build,完事后，会多出一个dist目录，dist目录下的index.html就是vue所说的单页面富应用的单页面
3，修改index.html关于js、css、img文件的引用路径，这里也把’ / ‘改为’ . / ’
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4,补充一个小坑
vue项目打包的时候，不要启用路由去哈希的history模式，否则即使修改了上面的相对路径的问题，页面也是一片空白
在这里插入图片描述

webStorm 打包Vue项目
北大落榜生的博客
01-02 1万+
首先，如果需要打包的话，你需要改下资源的路径 1、打开Vue下的build下面的utils.js文件，添加publicPath：“…/…/” if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:"../../", fall...
手把手教你用webpack搭建一个Vue工程化项目
最新发布
qq_44741577的博客
07-11 1021
Webpack是一个前端模块打包工具，能够将多个模块按照依赖关系打包成静态资源文件。本文介绍了Webpack的主要功能（模块打包、依赖管理、文件转换、代码拆分、插件系统）和核心概念（entry、output、loader、plugin）。通过Webpack5搭建脚手架的实战演示，包括初始化项目结构、配置入口/出口文件、生成HTML文件、处理CSS/LESS文件等步骤。文章详细展示了从零开始配置Webpack的过程，最终实现了一个基础的前端构建工具，并成功运行了打包后的项目。
【前端工程化】一.前端工程化；二.使用webpack打包vue项目；三.在webstorm中安装vite插件，通过vite构建工具创建vue项目
weixin_44892365的博客
02-01 2726
【前端工程化】一.前端工程化;二.使用webpack打包vue项目;三.在webstorm中安装vite插件，通过vite构建工具创建vue项目
WebStorm打包Vue项目
qq_53568186的博客
09-25 3916
WebStorm打包Vue项目，检查如果模式改为了history模式，打包后的页面为空，将其注释，使用默认的hash模式即可。测试一下，浏览器打开index.html即可。目录中多一个dist文件夹即为打包成功。
webstorm打包vue项目
qq_43158726的博客
08-12 771
router->index.js const router = new VueRouter({ routes, //去掉# 启动history模式 // mode:'history' mode:'hash' }) vue.config.js module.exports = { configureWebpack:{ resolve:{ // 配置末尾.js vue // extensions:[] // 配置别名 alias
WebStorm 创建一个Vue项目
qq_60245590的博客
01-02 4132
这些技术和库之间协同工作以实现一个完整的Web应用程序，其中Vue.js用于构建前端界面，Axios用于处理HTTP请求，Node.js用于构建后端服务，CORS用于解决跨域问题，而Element UI提供了一套现成的Vue组件，用于构建用户界面。上述操作后会在安装目录中该路径下创建 node_modules 文件夹，如果该文件夹没有创建需手动创建。Vue CLI：@vue\cli所在路径，位于node_global\node_modules 文件夹中。见下图，项目创建完成！出现以下运行结果则安装成功！
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
10-16
总结，解决Idea和WebStorm中Vue CLI项目Webpack别名不生效的问题，主要是通过更新IDE的Webpack配置来实现。确保IDE能够找到并应用正确的Webpack配置文件，从而使别名得到正确解析。此外，保持Vue CLI项目配置的正确...
webstorm搭建vue项目（新手参考）
01-20
安装webstorm 首先安装webstorm，因为webstorm 集成了多种版本控制工具，基本的功能都可以使用，比如git。同时它也支持node.js调试，对于学生也有免费的优惠，稍后会讲如何申请。...3. 搭建vue之前准备工
webStorm打包vue项目并且部署到服务器
weixin_43085797的博客
04-29 1万+
至于我为什么部署到window系统来当测试服务器，是因为公司叫我用台式电脑当测试服务器，所以用window系统. 部署之前，服务器的node.js等等环境要先部署好 一、打包项目(我用的开发工具是webStorm，所以直接在编译器输入命令打包) 添加依赖：npm install 打包：npm run build 如果打包的时候报错： ERROR Error: CSS minification ...
WebStorm打包vue项目并且部署到服务器
chaishen10000的专栏
05-12 6071
一、打包项目 使用 WebStorm 打开项目，在 WebStorm 的终端输入添加依赖命令 > npm install > npm run build 打包完成后，会在项目根目录下生成一个 dist 文件夹，里面的文件就是需要部署的打包文件。 二、部署项目 全局安装 express-generator 生成器 > npm install express-generator -g 三、创建项目部署目录 使用 Node.js 命令提示工具进入项目部署根目录，使用 expr
webstorm搭建vue环境以及通过webpack模板搭建项目流程
08-19
webstorm搭建vue环境以及通过webpack模板搭建项目流程
6.安心快修 - WebStorm中通过npm进行打包Vue项目操作
majunzhu的博客
06-11 1123
1.打包报错信息： 2.因为package.json文件里面没有配置build脚本,所以报以上错误！ 3.解决方案： 在package.json中的scripts中添加build脚本： { "scripts": { "build": "cross-env NODE_ENV=production webpack --config webpack.config.js" } } 4.其他问题： 有可能出现 ‘cross-env’ 不是内部或外部命令，也不是可运行的程序 的错误 通过 npm i
前端--用webstorm搭建vue项目
blues的博客
04-20 862
本文只针对新手。 首先要明白几个名词（概念）。 Node.js： Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。 npm： npm全称为Node Package Manager，是一个基于N...
使用webstorm建立的vue项目，及使用hbuilderx进行app打包
qq_40980455的博客
03-13 2823
1.首先使用webstorm 进行项目的创建，模板使用webpack 全局安装vue-cli npm install -g vue-cli 全局安装 webpack npm install webpack -g 2.查看到项目目录结构如下 3.在这样直接进行npm run dev,编译器可能会报错，由于是有eslint的语法检查,因此在settings里边关闭检查。 4.写好自己的项目之后...
使用WebStorm开发Vue3项目
阿盘的博客
10-31 8686
记录一下使用WebStorm开发Vu3项目时的配置。
webstorm编译软件创建vue项目框架并运行
m0_66778036的博客
04-12 656
6.创建结束后自动显示地址：http://localhost:8080/ 点击 进入右侧页面 代表运行成功。1.进入webstorm首页——file——new——Project。4.点击红圈处绿色三角按钮 进行运行 等待运行条结束。2.项目名称自定义小写：myvueproject。5. 左侧：vue基本项目结构框架。3.Terminate命令提示窗口。
Vue-6.编译器webstorm
yueerba126的博客
08-18 583
对于长期使用idea的同学，前端编译器可以使用webstorm下载地址。
vue: WebStorm设置快速编译运行
热门推荐
卜可的博客
08-08 2万+
WebSorm是一款优秀的前端开发工具，而Vue项目可以使用Node进行编译运行，平常我们可以通过命令行部署项目进行调试。本文介绍设置Webstorm进行快速部署Vue项目。第一步点击启动快捷按钮旁边的向下小箭头，在列表中选择Edit选项：第二步打开启动设置页面后，点击左上角的加号添加新的运行方式：第三步在弹出的选择框中，选择node.js启动模式：第四步在新打开的设置页面中，在红色圈中的地方设置如
WebStorm Vue环境搭建及Webpack模板项目构建教程
通过这篇文章，读者将学会如何在Webstorm中配置Vue开发环境，利用webpack模板创建和管理项目，以及如何利用各种工具进行高效开发。这对于想要使用Vue.js进行前端开发的开发者来说是一份宝贵的指南。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值