vue+vuex的项目,使用webpack打包生产环境后,如何运行呢?

vue+vuex的项目,使用webpack打包生产环境后,如何运行呢?
有样例代码最好

2个回答

放到http服务器上面,如nginx

把打包后的static和index.html放到服务器的发布文件夹下,例如tomcat的话放到webapps下直接访问Ok

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用webpack打包后的vue项目如何运行(express)
我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css、js以及图片等,那么打包后的文件该如何正确运行呢?   倘若直接打开html文件,会报如下错误:        那么该如何运行呢?其实可以将生成的dist文件部署到 express 服务器上运行。   (1)、安装express-generator生成器。      npm i...
webpack打包vue项目
命令行指令 npm run build1.vue cli给我们提供了npm run build命令打包项目,在packa.json文件中scripts对象中有build属性,当我们执行npm run build时,就执行build对应的"node build/build.js"脚本build完成后显示进入项目文件夹,找到dist文件夹,这些是打包后产生的文件2.webpack打包过程中会将css和...
Vue项目-webpack打包
Vue项目打包 1.通过git 输入如下命令: npm run build 运行打包命令:注意 build 并不是固定写法,若想修改,可以自行在package.json文件中修改。 运行打包命令成功后,就会生成一个dist文件夹,直接将该文件丢到需要服务器即可上线。 注意:打包时,在项目的index.js(入口文件)文件中,axios的默认URL需要改成服务器的地址。 2.如果想在自己电脑...
vue 应用生产环境的 webpack 打包配置优化
1. 去掉 console 打印及 debug 信息,加快运行速度 修改 /build/webpack.prod.conf.js 文件配置如下: const webpackConfig = merge(baseWebpackConfig, { plugins: [ new UglifyJsPlugin({ uglifyOptions: { compress:...
webpack打包vue脚手架项目
前面几篇文章都是安装的,这一篇文章终于到打包了,总以为打包很麻烦,实操了几次之后,其实都还好,打包出来发现真的很神奇,大大小的文件都给处理好了 网上有很多好的关于webpack打包过程,我就不多说了https://www.cnblogs.com/hai-cheng/p/7826701.html我是参考这一篇文章实操了一下,可以实现。 打包需要注意的就是打包出来之后的文件路径即可。  ...
使用webpack构建vue项目并打包
1.首先安装node.js (因为需要npm) 2.安装webpack npm install -g webpack 3.安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 4.npm安装vue.js npm install vue -g 5.安装vue-cli(vue的脚手架) cn...
如何运行webpack打包的vue项目之后的dist文件
1、打包vue项目:npm run build会生成一个dist文件 express是一个基于node.js平台的web开发框架 2、安装express、express-generator npm install express -g npm i express-generator -g 3、创建expressDemo项目 express exp...
webpack打包vue项目之后生成的文件如何运行
我的项目里面:webpack打包之后生成的文件放在 market 目录下; 所以根据官方文档可以做如下操作: npm install -g serve (全局安装) serve -s market (运行打包后的文件) 这样在:http://localhost:5000 这个网址就能看到打包之后的效果了; 注意:一般前端项目里面的请求是通过代理请求其他后端接口的...
vue项目运行及打包
1 运行项目 npm run serve(这里的serve不定,根据package.json中的配置,即下图中scripts对象中的serve属性) 运行完后,可打开本地IP 2 打包项目 npm run build(同理,这里的build也不定,上图中,scripts对象中的build属性) Build complete表示打包成功,生成一个dist文件 ...
使用webpack打包vue工程
最近在研究vue.js,在react中使用的webpack,vue的官网安装的demo工程默认就可以创建webpack的依赖。 下面地址可以安装https://cn.vuejs.org/v2/guide/installation.html。 文件解释: build中配置了webpack的基本配置、开发环境配置、生产环境配置 config中配置了路径端口值等 n
使用webpack打包你的项目
    上周了解了gulp,不得不再来了解一下应用更多的webpack,毕竟现在vue项目中使用的是webpack。先来了解一些webpack在命令行中的简单操作。     首先在项目目录中安装webpack。 npm install webpack --save-dev     安装完成后,项目中增加了node_modules文件夹和package.json文件。在项目目录中新建inde...
webpack vue 打包优化
webpack vue 打包优化 问题描述 在项目优化中,有一种方案,不经常更新的第三方包可以不打在 vendor.js 中,可以在 .html 模板中引入,然后在 webpack 中配置排除这些包,但是会遇到一个问题,就是开发环境中,如果排除掉 vue.js 不打入 vendor.js 中,则无法使用 vue devtools 进行调试,如果不排除 vue.js ,则又会和模板中引入的...
Vue webpack打包部署项目
1.问题描述: 今天,要将使用 Vue 前端框架编写的项目,想要在服务器进行项目的部署,由于Vue框架的 webpack 具有打包功能,但是在打包到部署过程中还存在一些问题,现在我将打包部署过程进行详细的描述一次,避免以后踩坑。 Question:可能会出现在浏览器浏览项目,出现空白页的情况。 2.问题解决办法: 通过查询资料,产生空白页的原因是由于项目的路径有问题。对项目打包时的路...
vue webpack打包路径
vue项目开启history模式,本地dev找不到页面, webpack打包后页无法显示,请教改怎么写路径
如何使用vue和webpack搭建项目
1.首先新建一个文件夹,用vscode打开该文件夹2.进入终端 3.使用npm install -g vue-cli安装vue-cli 4.使用vue init webpack my-project系统会帮我们创建一个my-project文件夹并初始化包括安装相关的依赖,非常的方便这里面有一个巨坑,总是会安装失败,提示Please t...
教你如何使用webpack打包你的项目
webpack是前端开发中比较常用的打包工具之一,另外还有gulp,grunt。之前没有涉及过打包这块,这里介绍一下使用webpack打包的流程。
vue项目webpack打包问题解决方案汇总
1.打包后项目空白 修改config文件夹下index.js中的assetsPublicPath为'./'(默认为‘/’) 2.背景图片的引用问题 修改build文件夹下的utils.js,加入如下代码 文章参考自:https://blog.csdn.net/wang1006008051/article/details/78066140 ...
webstorm通过webpack打包vue项目
1,打包之前需要修改一个配置文件,即config目录下的index.js,找到index.js文件中的build模块,将assetsPublicPath:’ / ’ 改为 assetsPublicPath:’. / ’ assetsPublicPath属性作用是指定编译发布的根目录,’ / ’ 指的是项目的根目录,’ . / ’ 指的是当前目录 拿webStorm通过vue-cli构建的项目为例:...
创建基于webpack打包的vue项目
结合win7、element-ui、vue(vue-router、vue-cli)、webpack等技术,完成了项目的基础工作。难则不会,会则不难;贵在经验总结,后期可参。 花絮 · 先预览 - 项目目录结构图 一、 项目初建、编译打包、服务器配置 大致分析:【以上图为例】 指定workplace,开始初建项目: cd 目标位置路径(如:C:\Users) 安装vue: cnpm ins...
关于vue项目+webpack 打包的坑
今天遇到一个打包  npm run build 的坑    打包出来 发现不是html文件  而是index.vue文件,由于我是第一次用这个 ,然后网上查了很多资料  后来发现 在config/index.js里面的文件配置有问题 开发环境的是没有问题的,不过生产环境就有问题啦  下面是生产环境    这里的  index 是输出文件的名字 , 我之前没注意居然是index.vue  后来...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例。必须要配置的就是/config/index.js在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现
Vue项目webpack打包部署到Tomcat
Vue项目webpack打包部署到Tomcat 转自 https://www.jianshu.com/p/911f66d4d6f6 Vue项目webpack打包部署到Tomcat 新建Vue项目webpack打包,部署到Linux服务器Tomcat上。 2,在Linux服务器下的Tomcat的webapps下创建VueTest文件夹, 3,配置router/index.js文件,增加b...
Vue——webpack打包
首先创建Vue项目 vue init webpack <项目名称>进入交互 1. 输入项目名称 2. 项目描述 3. 作者名称 4. 选择vue的编译模式 默认选择第一种模式 5. 选择是否安装vue的路由  6. 是否启用eslint 检测你的代码  7. 启用tests (用来做单元测试的) 8. 启用e2e (用来做单元测试的) 9. 选择用yarn 还是np...
webpack打包vue文件
在webpack中需要把vue单文件组件打包需要经过下面几步:   一、前提:     忽略前面项目部署的流程,假定你的webpack项目中已经安装vue,并创建了vue单文件组件进行渲染了。 二、打包步骤:      1、安装vue文件加载器 $ cnpm i vue-loader vue-template-compiler -D     其中vue-loader为vue文件加载...
Vue之vue项目引入vuex
1、首先给项目安装依赖 npm install vuex --save 2、新建仓库 在src目录下新建一个文件夹,命名为store,然后在该文件夹下面创建一个js文件store.js。 3、新建仓库在项目中引入 //在main.js中 import store from './store/store' new Vue({ el: '#app', router, store, //使...
Vue项目4、Vuex
在中大型的项目中,组件与组件之间,父组件与子组件之间需要传递的参数是非常多的。通过简单的事件中心(bus)已经不能满足需求,这时候我们可以借助vue官方推荐的状态管理插件Vuex来管理我们的数据。Vuex 官方文档 Vuex 深入理解我们可以根据项目的需求定制不同的Vuex的结构,下面是Vuex官方给出的一个结构示例目录:store ├── index.js # 我们组装
vue打包之后的项目运行
vue-cli项目最后总是不可避免进行打包操作,但是打包之后如何运行?,可以借助下面node代码运行以及创建接口代理: var express=require("express"); //项目的一个配置文件,在这里主要用来获取生产环境的端口号 var config=require('./config/index.js'); var app = express(); //这部分主要用来创建...
webpack打包vue项目后,配置可以修改的配置文件
1.先安装generate-asset-webpack-plugin npm install --save-dev generate-asset-webpack-plugin 注意:--save-dev(安装在devDependencies)开发环境使用 --save (安装在 dependencies)生产环境使用 2.需要更改 build文件夹下的 web...
用webpack打包vue项目后,静态资源路径失效问题
当时正在做一个vue的移动端项目,用npm run build打包后,发现有些在dev环境下可用的静态资源失效,经过调试后,发现在vue-cil生成的项目结构中,找到build目录,在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: '../../'
关于vue打包后如何运行
1.首页安装nginx-v1.13.8   安装包私信我要吧~~    先解压到一个盘里  2.用记事本打开,修改端口号,我这边修改的是5200 3.启动这个nginx.exe    双击后  会有一个命令行窗口一闪而过  4.然后访问 http://localhost:5200,你会看到这个页面 5.然后将刚刚打包好的dist文件(就是你npm run build打包后
Vue项目使用webpack打包时纯静态资源的处理
Vue项目的开发过程中集成一款地图插件,但地图版本较低,无法通过npm管理,在打包的时候需要把地图包copy到dist目录下,于是使用到了webpack插件CopyWebpackPlugin, 该插件可以在webpack中拷贝文件和文件夹 安装命令为 npm install --save-dev copy-webpack-plugin 创建CopyWebpackPlugin:new Co
vue的webpack项目
webpack模板生成的vue项目,集成了基本的axios和element-ui
webpack打包react项目
1webpack简介 webpack是目前最流行的打包工具之一,是一个为前端模块打包构建而生的工具,它既吸取了大量已有的方案优点和教训,也解决了很多前端开发过程中已有的痛点,如代码的拆分与异步加载,对非js资源的支持,强大的loader设计使得它更像是一个构建平台,而不是打包工具。 2webpack,react开发环境 1)新建一个项目文件夹,进入此文件夹,创建package.json文件(
webpack 打包项目
检查 node npm 版本(此处不做node npm 安装教程,未安装自行百度 ) node -v npm -v 初始化项目(得到 package.json 文件) npm init 安装 webpack npm install --save-dev webpcak // 本地安装 创建3个文件 1). index.html <!DOCTYPE html>...
webpack打包项目
本课程介绍了webpack基本使用和打包压缩项目中的文件
webpack打包前端项目
1、安装Nodejs及相关配置 1.1 安装nodejs 参考此文章:https://blog.csdn.net/henery_002/article/details/78016575 查看是否安装成功 1.2 配置npm的全局模块的存放路径以及cache的路径 (1)在nodejs的安装路径下建两个文件夹:node_cache和node_global  (2)然后执行如下两个...
初始化vue + webpack 项目
安装vue脚手架 npm install -g vue-cli 这样我们就可以全局试用 vue 这个命令 我们输入 vue list 可以看到许多基于vue 的项目模板 这里列出了 我们可以用到的模板 初始化一个webpack模板 vue init webpack projectname 于是生成了一个 webpack + vue 项目。...
初识 webpack vue项目
1. webpack vue 入门
vue webpack 搭建项目
引入jQuery插件 在webpack.base.conf.js中添加 const webpack = require('webpack') module.exports 中添加 plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery' }) ], 引入bootstrap ...
使用webpack打包编写一个vue插件
一、说明: 需求:创建一个toast插件 思路:利用vue组件创建模板,使用webpack打包生成插件再全局使用。 # 项目目录: |_ package.json |_ webpack.config.js |_ .babelrc |_ dist |_ src |_ index.html |_ lib |_ index.js |_ vue-to
相关热词 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法 c# gmail 发邮件 c# 多层文件