vue cli 打包,vue-cli webpack

　　本文将与您分享使用vue-cli创建基于webpack模板打包的项目的配置方法。本文通过示例代码为您做了非常详细的介绍，对您的学习或工作有一定的参考价值。请有需要的朋友参考。

　　1.准备环境(nodejs下载并设置环境变量)

　　2.全局安装vue-cli，并提供vue命令来创建vue项目。

　　npm安装-g @vue/cli

　　关于旧版本

　　e 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我的项目

　　4.执行默认配置。

　　#这里需要一些配置，默认按enter就可以了。

　　这将安装模板的Vue 2.x版本。

　　对于Vue 1.x使用：vue init webpack#1.0 my-project

　　#开始配置

　　？项目名称我的项目

　　？项目描述Vue.js项目

　　？作者鲁诺布test@runoob.com

　　？Vue独立构建

　　？用ESLint lint你的代码？是

　　？选择一个ESLint预设标准

　　？用Karma Mocha设置单元测试？是

　　？用守夜人设置e2e测试？是

　　#配置结束

　　vue-cli生成了“我的项目”。

　　要开始使用：

　　cd我的项目

　　npm安装

　　npm运行开发

　　文件可以在https://vuejs-templates.github.io/webpack找到

　　5.进入项目，安装node_modules，并启动项目

　　cd我的项目

　　npm安装

　　npm运行开发

　　6.打包项目并配置nginx。

　　#包项目

　　npm运行构建

　　Nginx配置

　　worker _ process 1；

　　事件{

　　工人_连接1024；

　　}

　　http {

　　包括mime.types

　　default_type应用程序/八位字节流；

　　在上发送文件；

　　keepalive _ timeout 65

　　服务器{

　　听8081；

　　server_name本地主机；

　　位置/{

　　根目录E:/vue work/my-project/dist；

　　try _ files $ uri $ uri//index . html；

　　索引index.html index.htm；

　　}

　　}

　　}

　　7.重复打包，文件不更新。

　　构建目录中的webpack包文件引用了clean-webpack-plugin插件，然后就可以在plugin中使用了。

　　8.部署：配置nginx，打包项目，启动nginx。

　　npm运行构建

　　启动nginx

　　这就是这篇关于用vue-cli创建项目的文章。有关Vue webpack打包的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。