使用vue-cli創(chuàng)建項目并webpack打包的操作方法
更新時間：2021年07月12日 09:45:24 作者：good_good_xiu
本文給大家分享使用vue-cli創(chuàng)建項目基于webpack模板打包的配置方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
1.準備環(huán)境（nodejs下載和設置環(huán)境變量）
2.全局安裝vue-cli，提供vue命令進行創(chuàng)建vue項目
npm install -g @vue/cli
關于舊版本
Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。
3.創(chuàng)建一個基于 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創(chuàng)建項目，webpack打包的文章就介紹到這了,更多相關vue webpack打包內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了Vue使用vue-qr生成二維碼的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
vue修飾符v-model及.sync原理及區(qū)別詳解
這篇文章主要為大家介紹了vue修飾符v-model及.sync原理及使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)web在線聊天功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
antd+vue實現(xiàn)動態(tài)驗證循環(huán)屬性表單的思路
今天通過本文給大家分享antd+vue實現(xiàn)動態(tài)驗證循環(huán)屬性表單的思路，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-09-09
Vue2.0實現(xiàn)組件之間數(shù)據(jù)交互和通信操作示例
這篇文章主要介紹了Vue2.0實現(xiàn)組件之間數(shù)據(jù)交互和通信操作,結合實例形式分析了vue2.0組件之間通信的原理、實現(xiàn)方法及相關操作注意事項,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue 實例中使用$refs的注意事項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
本篇文章主要介紹了五分鐘搞懂Vuex實用知識，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要為大家詳細介紹了如何通過Vue3實現(xiàn)簡單的轉盤抽獎效果,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的可以了解一下2023-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue項目開啟Gzip壓縮和性能優(yōu)化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10