使用vue-cli創(chuàng)建項目并webpack打包的操作方法
更新時間：2021年07月12日 09:45:24 作者：good_good_xiu
本文給大家分享使用vue-cli創(chuàng)建項目基于webpack模板打包的配置方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
1.準備環(huán)境（nodejs下載和設(shè)置環(huán)境變量）
2.全局安裝vue-cli，提供vue命令進行創(chuàng)建vue項目
npm install -g @vue/cli
關(guān)于舊版本
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
# 配置結(jié)束
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.重復(fù)打包，文件不更新問題。
在build目錄下的webpack打包文件引用clean-webpack-plugin插件，然后在plugin中使用即可。
8.部署：配置nginx，打包項目，啟動nginx即可
npm run build start nginx
到此這篇關(guān)于使用vue-cli創(chuàng)建項目，webpack打包的文章就介紹到這了,更多相關(guān)vue webpack打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中rem的配置的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Vue無法讀取HTMLCollection列表的length問題解決
這篇文章主要介紹了Vue無法讀取HTMLCollection列表的length問題解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
VUE微信H5生成二維碼海報保存在本地相冊的實現(xiàn)
本文主要介紹了VUE微信H5生成二維碼海報保存在本地相冊的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了精讀《Vue3.0 Function API》，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了vue-cli3腳手架安裝方法，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
vuex(vue狀態(tài)管理)的特殊應(yīng)用案例分享
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。2020-03-03
這篇文章主要介紹了使用vue-cli腳手架工具搭建vue-webpack項目，通過幾個默認的步驟幫助你快速的構(gòu)建Vue.js項目。非常具有實用價值，需要的朋友可以參考下2019-01-01
這篇文章主要介紹了vue如何局部修改Element樣式，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
在前端開發(fā)中，如果需要模擬后端數(shù)據(jù)，而又不想開發(fā)一個后端服務(wù)器， 則可以借助mock.js配置一個后端服務(wù)器來返回前端需要的數(shù)據(jù)，本文將會分別介紹在Quasar項目和Vite項目中Mock服務(wù)器的配置方法2022-12-12
Vue3實現(xiàn)動態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法詳解
在開發(fā)工作過程中，我們會遇到各種各樣的表格數(shù)據(jù)導(dǎo)入，動態(tài)數(shù)據(jù)導(dǎo)入可以減少人為操作，減少出錯。本文為大家介紹了Vue3實現(xiàn)動態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法，需要的可以參考一下2022-11-11