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.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue 表格数据增加修改(vue element实现表格增加删除修改数据)
- vue基础语法对象(浅析从面向对象思维理解Vue组件)
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- spring boot docker部署(docker部署springboot和vue项目的实现步骤)
- vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue实现树形结构菜单(vue递归实现三级菜单)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue pdf预览插件(Vue-pdf实现在线预览PDF文件)
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- vue-router的两种模式(vue-route路由管理的安装与配置方法)
- vue 父组件向子组件传值几种方法(Vue中父组件向子组件传递数据的几种方法)
- vue封装组件技巧(浅谈vue中所有的封装方式总结)
- 成都旅游攻略(成都旅游攻略自由行最佳线路)
- 给儿童吃什么最好(给儿童吃什么最好消化)
- 杭州旅游攻略()
- 云南旅游攻略(云南旅游攻略5天攻略)
- 收藏 春节假期,这些景区巨划算(收藏春节假期这些景区巨划算)
- 景区游玩,这些安全知识要牢记(这些安全知识要牢记)
热门推荐
- python中列表remove的用法汇总(对python_discover方法遍历所有执行的用例详解)
- html5 布局设计(Html5导航栏吸顶方案原理与对比实现)
- php7.4编译安装(PHP7.3.10编译安装教程)
- angular兄弟组件调用方法(Angular封装WangEditor富文本组件的方法)
- 如何获取存储过程返回值
- mysql 删除数据回收空间(浅谈为什么MySQL不建议delete删除数据)
- 如何把阿里云盘加入到快捷操作(阿里云如何挂载数据盘?阿里云挂载数据盘一键脚本)
- 手机网站设计的几个建议
- sql server 时间与日期函数(SQL Server日期加减函数DATEDIFF与DATEADD用法分析)
- 怎么样才知道云服务器够不够用(新手应该怎么选择云服务器才能避免被坑?)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9