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