使用vue-cli创建项目并webpack打包的操作方法

 更新时间:2021年07月12日 09:45:24   作者:good_good_xiu  
本文给大家分享使用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使用vue-qr生成二维码的方法

    深入了解Vue使用vue-qr生成二维码的方法

    这篇文章主要为大家介绍了Vue使用vue-qr生成二维码的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • vue修饰符v-model及.sync原理及区别详解

    vue修饰符v-model及.sync原理及区别详解

    这篇文章主要为大家介绍了vue修饰符v-model及.sync原理及使用区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue实现web在线聊天功能

    vue实现web在线聊天功能

    这篇文章主要为大家详细介绍了vue实现web在线聊天功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • antd+vue实现动态验证循环属性表单的思路

    antd+vue实现动态验证循环属性表单的思路

    今天通过本文给大家分享antd+vue实现动态验证循环属性表单的思路,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-09-09
  • Vue2.0实现组件之间数据交互和通信操作示例

    Vue2.0实现组件之间数据交互和通信操作示例

    这篇文章主要介绍了Vue2.0实现组件之间数据交互和通信操作,结合实例形式分析了vue2.0组件之间通信的原理、实现方法及相关操作注意事项,需要的朋友可以参考下
    2019-05-05
  • Vue 实例中使用$refs的注意事项

    Vue 实例中使用$refs的注意事项

    这篇文章主要介绍了Vue 实例中使用$refs的注意事项,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-01-01
  • 五分钟搞懂Vuex实用知识(小结)

    五分钟搞懂Vuex实用知识(小结)

    本篇文章主要介绍了五分钟搞懂Vuex实用知识,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue3实现转盘抽奖效果的示例详解

    Vue3实现转盘抽奖效果的示例详解

    这篇文章主要为大家详细介绍了如何通过Vue3实现简单的转盘抽奖效果,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的可以了解一下
    2023-10-10
  • vue实现简单放大镜效果

    vue实现简单放大镜效果

    这篇文章主要为大家详细介绍了vue实现简单放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue项目开启Gzip压缩和性能优化操作

    vue项目开启Gzip压缩和性能优化操作

    这篇文章主要介绍了vue项目开启Gzip压缩和性能优化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10

最新评论