vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細過程
參考文檔 https://cli.vuejs.org/zh/
1.安裝 npm install -g @vue/cli 2.檢查安裝 vue -V 3.創(chuàng)建項目 vue create project_name 出現(xiàn)下圖信息
4.上圖兩種選擇方式,第一種是默認(rèn)的,第二種自己選擇配置
這里一般選擇第二種自己配置,點擊回車鍵后出現(xiàn)下圖信息
5.在上圖中選擇你需要的模塊,上下移動,空格進行確定,下圖是測試選擇的
6.選好后,敲Enter鍵,接著選擇
7.選擇完畢后,一路Enter,到下圖
8.模板創(chuàng)建完成,目錄如下
9.配置測試環(huán)境接口,線上服務(wù)器環(huán)境接口
(通過在項目根目錄下新建.env .env.development .env.production文件來控制)
如下圖
關(guān)于這一塊的信息,請查看[環(huán)境配置](https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%A4%BA%E4%BE%8B%EF%BC%9Astaging-%E6%A8%A1%E5%BC%8F)
在目錄里加入了3個文件
.env.development 開發(fā)環(huán)境文件
.env.production 線上環(huán)境文件
在上邊3個文件中:
使用VUE_APP_URL = “接口url”
書寫格式:VUE_APP_[自定義name]
配置打包環(huán)境
打包后在本地預(yù)覽,你需要啟動一個node服務(wù): 1.npm install -g serve //全局安裝服務(wù) 2.serve -s dist // 啟動服務(wù)預(yù)覽 獲取當(dāng)前的環(huán)境: console.log(process.env.VUE_APP_URL)
10. 其它配置寫在.vue.config.js文件中
在根目錄下新建
包括端口號,代理跨域,熱更新,多入口等,具體參考官方api
https://cli.vuejs.org/zh/config/#vue-config-js
vue.config.js(部分配置)
const path = require('path'); module.exports = { publicPath:'/', // 公共路徑 outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', // 不同的環(huán)境打不同包名 css: { // 一次配置,全局使用,這個scss 因為每個文件都要引入 loaderOptions: { sass: { data: `@import "./src/assets/hotcss/px2rem.scss";` } } }, lintOnSave:false, // 關(guān)閉eslint productionSourceMap:true, // 生產(chǎn)環(huán)境下css 分離文件 devServer:{ // 配置服務(wù)器 port:8081, open:true, https:false, overlay: { warnings: true, errors: true } }, configureWebpack:{ // 覆蓋webpack默認(rèn)配置的都在這里 resolve:{ // 配置解析別名 alias:{ '@':path.resolve(__dirname, './src'), '@h':path.resolve(__dirname, './src/assets/hotcss'), '@s':path.resolve(__dirname, './src/assets/style'), '@i':path.resolve(__dirname, './src/assets/images'), } } } }
到此這篇關(guān)于vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細過程的文章就介紹到這了,更多相關(guān)vue cli3.0環(huán)境打包配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue2+SpringBoot實現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載的使用示例
本文主要介紹了Vue2+SpringBoot實現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10對Vue table 動態(tài)表格td可編輯的方法詳解
今天小編就為大家分享一篇對Vue table 動態(tài)表格td可編輯的方法詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08Vue+tracking.js 實現(xiàn)前端人臉檢測功能
這篇文章主要介紹了Vue+tracking.js 實現(xiàn)前端人臉檢測功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04vue常用指令實現(xiàn)學(xué)生錄入系統(tǒng)的實戰(zhàn)
本文主要介紹了vue常用指令實現(xiàn)學(xué)生錄入系統(tǒng)的實戰(zhàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02