vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
类别:编程学习 浏览量:275
时间:2021-10-14 00:43:27 vuecli打包项目
使用vue-cli创建项目并webpack打包的操作方法1.准备环境(nodejs下载和设置环境变量)
2.全局安装vue-cli,提供vue命令进行创建vue项目
npm install -g @vue/cli
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
3.创建一个基于 webpack 模板的新项目(先新建项目文件夹,打开所在位置命令行)
vue init webpack my-project
4.进行默认配置
# 这里需要进行一些配置,默认回车即可 This will install Vue 2.x version of the template. For Vue 1.x use: vue init webpack#1.0 my-project # 开始配置 ? Project name my-project ? Project description A Vue.js project ? Author runoob <test@runoob.com> ? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? Yes # 配置结束 vue-cli · Generated "my-project". To get started: cd my-project npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
5.进入项目,安装node_modules,并启动项目
cd my-project npm install npm run dev
6.打包项目,并且配置nginx
# 打包项目 npm run build
nginx配置
worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 8081; server_name localhost; location / { root E:/vuework/my-project/dist; try_files $uri $uri/ /index.html; index index.html index.htm; } } }
7.重复打包,文件不更新问题。
在build目录下的webpack打包文件引用clean-webpack-plugin插件,然后在plugin中使用即可。
8.部署:配置nginx,打包项目,启动nginx即可
npm run build start nginx
到此这篇关于使用vue-cli创建项目,webpack打包的文章就介绍到这了,更多相关vue webpack打包内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue如何导入excel(Vue实现导入Excel功能步骤详解)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- vue中的定时函数(vue计时器的实现方法)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- vue改数组和对象值(vue $set 实现给数组集合对象赋值)
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
- vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- vue 修改后刷新(Vue使用三种方法刷新页面)
- vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
- vue十大基础知识(vue实战中的一些实用小魔法汇总)
- vue 访问后台接口(vue轮询请求解决方案的完整实例)
- vue子视图里再加routerview(vue router-view的嵌套显示实现)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- 包水饺(包水饺手法怎么包视频)
- 越南河粉(越南河粉来自哪里)
- 按这几方面养护佛肚竹盆景,保证枝叶繁茂,造型优美(按这几方面养护佛肚竹盆景)
- 冰岛旅游攻略(冰岛旅游攻略及花费八日游)
- 寒假旅游攻略(成都寒假旅游攻略)
- 菲律宾旅游攻略(菲律宾旅游攻略地图)
热门推荐
- dedecms怎么加入模板(dedecms 列表页标题修改图文方法利于优化)
- extjs Border边框布局
- 创建数据库入门教程mysql(MySQL数据库安装教程一学就会)
- nginx负载均衡器的作用(Nginx 负载均衡是什么以及该如何配置)
- dede搜索模板代码(DEDE调用指定文章ID来调用特定文档)
- docker 部署参数配置(Docker部署nGrinder性能测试平台过程解析)
- python内置函数一览表(Python面向对象程序设计构造函数和析构函数用法分析)
- Javascript中apply、call、bind
- html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
- 十问linux虚拟内存(浅谈Linux的虚拟内存)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9