欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細過程

 更新時間:2023年01月17日 15:30:38   作者:素燃  
這篇文章主要介紹了vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細過程,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

參考文檔 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中使用axios及axios攔截器的配置教程

    vue2中使用axios及axios攔截器的配置教程

    眾所周知Axios是一個基于promise的HTTP庫,可以用在瀏覽器和 node.js中,下面這篇文章主要給大家介紹了關(guān)于vue2中使用axios及axios攔截器的配置的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-05-05
  • Vue2+SpringBoot實現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載的使用示例

    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中使用flv.js播放視頻的示例詳解

    Vue中使用flv.js播放視頻的示例詳解

    這篇文章主要為大家詳細介紹了如何在Vue項目中使用flv.js播放視頻,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-04-04
  • vue通過element樹形控件實現(xiàn)樹形表格

    vue通過element樹形控件實現(xiàn)樹形表格

    這篇文章主要為大家介紹了vue?element樹形控件實現(xiàn)樹形表格,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • vue3 Vite 進階rollup命令行使用詳解

    vue3 Vite 進階rollup命令行使用詳解

    這篇文章主要介紹了vue3 Vite 進階rollup命令行使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • vue3表單參數(shù)校驗及正則表達式舉例詳解

    vue3表單參數(shù)校驗及正則表達式舉例詳解

    最近項目中有一個校驗身份證號手機號的業(yè)務(wù),索性給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue3表單參數(shù)校驗及正則表達式的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-04-04
  • 對Vue table 動態(tài)表格td可編輯的方法詳解

    對Vue table 動態(tài)表格td可編輯的方法詳解

    今天小編就為大家分享一篇對Vue table 動態(tài)表格td可編輯的方法詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Vue+tracking.js 實現(xiàn)前端人臉檢測功能

    Vue+tracking.js 實現(xiàn)前端人臉檢測功能

    這篇文章主要介紹了Vue+tracking.js 實現(xiàn)前端人臉檢測功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-04-04
  • 解決vuejs項目里css引用背景圖片不能顯示的問題

    解決vuejs項目里css引用背景圖片不能顯示的問題

    今天小編就為大家分享一篇解決vuejs項目里css引用背景圖片不能顯示的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue常用指令實現(xiàn)學(xué)生錄入系統(tǒng)的實戰(zhàn)

    vue常用指令實現(xiàn)學(xué)生錄入系統(tǒng)的實戰(zhàn)

    本文主要介紹了vue常用指令實現(xiàn)學(xué)生錄入系統(tǒng)的實戰(zhàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02

最新評論