webpack打包vue项目之启动

最新推荐文章于 2022-07-23 13:47:11 发布
最新推荐文章于 2022-07-23 13:47:11 发布
阅读量162 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15769147/article/details/101023829
版权

1.全局安装express-generator生成器

 npm install express-generator -g

2.创建一个express项目

express myExpress

在这里插入图片描述
3.进入myExpress目录，安装项目依赖

npm install

4.把dist目录下的所有文件复制到express项目的public文件夹下
在这里插入图片描述
5.启动

npm start

输入http://localhost:3000就可看到效果

努力努力再努力zh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用webpack打包后的vue项目如何正确运行（express）
10-17
在现代前端开发中，Webpack 是一个非常重要的模块打包工具，它可以将 Vue.js 项目中的各种资源文件（如 JavaScript、CSS、图片等）进行编译、优化，并打包成可部署的静态资源。Vue 项目经过 Webpack 打包后，通常会...
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
使用webpack打包后的vue项目如何运行（express）
weixin_30814319的博客
05-12 468
　　我们知道使用webpack打包vue项目后会生成一个dist文件夹，dist文件夹下有html文件和其他css、js以及图片等，那么打包后的文件该如何正确运行呢？ 　　倘若直接打开html文件，会报如下错误： 　　　　 　　那么该如何运行呢？其实可以将生成的dist文件部署到express服务器上运行。 　　（1）、安装express-generator生成器。 　　　　npm...
webpack打开项目命令_vue学习:vue+webpack的快速使用指南（新手向）
weixin_33204286的博客
12-31 91
一、vue有两种使用方式：1.下载vue.js2.使用npmnpm install vue二、在vue的mvc思想基础上，会有很多想实现的功能，可以不必原生写。比如ajax请求，各种插件。安装vue-cli，促使这些插件可以在vue上运行。npm install vue-cli -g三、vue安装成功测试cmd 中,(vue各种模板)vue -Vvue list四、使用vue，结合webpack开...
VUE笔记（1）webpack方式启动
liuhuhang的博客
03-21 58
从零开始使用webpack 搭建vue项目
毕业作品网站
07-23 2339
=""
5步搞定vue-webpack前端项目本地启动
记录学习生活的点滴(Linux运维、java)
01-06 1096
1.安装node node-v10.15.3-x64.msi Node.js :http://nodejs.cn/ 2. 安装npm 淘宝NPM:https://npm.taobao.org/ npm-v6.9.0.zip 3.进入前端项目目录 cd /d D:\GitRepos\account_frontend 4.安装依赖 npm install 5.启...
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
Webpack 是一款强大的模块打包工具，常用于前端开发中，它能够将 Vue.js 项目中的各种资源（如 JavaScript、CSS、图片等）进行处理和优化，最终打包成静态资源。Vue 项目通过 Webpack 打包后，会在项目根目录下生成...
基于webpack搭建vue2.0的脚手架项目
10-11
Vue 2.0是Vue.js的一个重要版本，它带来了许多优化和改进，而Webpack作为现代JavaScript应用的模块打包工具，是构建Vue项目不可或缺的一部分。本篇文章将深入探讨如何基于Webpack搭建Vue 2.0的脚手架项目。 首先，...
超级详细的手写webpack4配置来启动vue2项目（附配置作用）
weixin_34203426的博客
02-24 139
基础目录结构以及各个文件的作用 初始npm项目 npm init 一路回车，一律使用默认的npm项目配置 package.json修改scripts 如下： { "name": "doing-a-webpack4-vue2-pro", "version": "1.0.0", "description": "超级详细的手写we...
webpack打包vue项目之后生成的dist文件该怎么启动运行
wangzhaoli0915的博客
03-16 2839
亲测，webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下： 进入该vue项目目录，打开git bash，执行：npm run build(在package.json的scripts配置) 执行成功如下图所示： 然后此时你会发现项目下多了一个 dist 文件夹，dist下文件便是项目打包之后生成的文件。 此时我们直接在浏览器中打开...
Webpack创建、运行vue.js项目及其目录结构详解
HuangQinJian
01-05 2万+
vue.js webpack
webpack打包vue项目之后怎么启动&注意事项
lotte
08-16 1万+
前端代码没有服务器可以部署到 express 服务器上运行 1.执行：npm run build 打包后生成dist文件夹 2. 安装express-generator生成器 执行  $ npm install express-generator -g  进行安装 3. 创建一个express项目 执行  $ express expressDemo （expressDemo是项目名...
springboot项目打包启动方式
rocrunwang的博客
11-06 479
绿色字体为非必填项，红色为说明并非命令 第一种： 直接在eclipse或idea上运行启动：右键run执行主函数 第二种： DOS窗口：-> 进入项目根目录：->mvn spring-boot:run 第三种： DOS窗口：-> 进入项目根目录：->mvn clean package -Dmaven.test.skip=true(说明：跳过test文件打包) ...
webpack 搭建VUE项目步骤详解
HelloWord176的博客
05-06 2259
首先我们先了解为什么要使用webpack？？？ Webpack是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。 要使用 Webpack 前须先安装Node.js。它做的事情是，分析你的项目结构，找到JavaSc...
webpack打包vue项目之后生成的文件如何运行
u013746071的专栏
05-30 3348
我的项目里面：webpack打包之后生成的文件放在 market 目录下； 所以根据官方文档可以做如下操作： npm install -g serve (全局安装) serve -s market (运行打包后的文件) 这样在：http://localhost:5000 这个网址就能看到打包之后的效果了； 注意：一般前端项目里面的请求是通过代理请求其他后端接口的...
Vue项目webpack打包部署到服务器
热门推荐
Dear_Mr的博客
06-05 7万+
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题，而且在经过我的询问，好多人在打包部署的时候都遇到了一些问题，下面就来说下，如何将Vue项目放置在服务器上，这里以Tomcat为例。必须要配置的就是/config/index.js在vue-cli webpack的模板下的/config/index.js，我们可以看到assetsPublicPath这个键，并且这个东西还出现
webpack打包（主要是处理html文件），并启动服务器
jiang7701037的博客
08-02 3916
这篇文章主要说一下，如何在webpack打包过程中，处理html文件。 项目目录结构 现在需要，通过webpack打包后，把所有的打包结果放在项目目录下的build目录下，直接启动webpack-dev-server进行运行。 一、安装插件： 1、ExtractTextPlugin： npm iextract-text-webpack-plugin --save-dev 2、h...
创建简单vue项目 / Webpack创建vue项目
weixin_45941687的博客
02-15 5208
创建简单vue项目 / Webpack创建vue项目 2. vue.js 为2.0 上面选择的vue.js为3.0，若选择vue.js 为2.0
webpack打包vue项目详细流程
最新发布
06-09
Webpack打包Vue项目的详细流程主要包括以下步骤： 1. 创建项目：使用Vue官方提供的Vue CLI脚手架工具创建项目，该工具已经集成了Webpack等相关依赖。命令如下： ``` vue create my-project ``` 2. 配置Webpack...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值