快捷導(dǎo)航

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

更新時(shí)間：2023年01月17日 15:30:38 作者：素燃

這篇文章主要介紹了vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細(xì)過程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

參考文檔 https://cli.vuejs.org/zh/

1.安裝
npm install -g @vue/cli
2.檢查安裝
vue -V  
3.創(chuàng)建項(xiàng)目
vue create project_name 
出現(xiàn)下圖信息

這里寫圖片描述

4.上圖兩種選擇方式，第一種是默認(rèn)的，第二種自己選擇配置
這里一般選擇第二種自己配置，點(diǎn)擊回車鍵后出現(xiàn)下圖信息

這里寫圖片描述

5.在上圖中選擇你需要的模塊，上下移動(dòng)，空格進(jìn)行確定，下圖是測(cè)試選擇的

這里寫圖片描述

6.選好后，敲Enter鍵，接著選擇

這里寫圖片描述

7.選擇完畢后，一路Enter，到下圖

這里寫圖片描述

8.模板創(chuàng)建完成，目錄如下

這里寫圖片描述

9.配置測(cè)試環(huán)境接口，線上服務(wù)器環(huán)境接口
（通過在項(xiàng)目根目錄下新建.env .env.development .env.production文件來控制）
如下圖
關(guān)于這一塊的信息，請(qǐng)查看[環(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個(gè)文件
.env.development 開發(fā)環(huán)境文件
.env.production 線上環(huán)境文件

這里寫圖片描述

在上邊3個(gè)文件中:
使用VUE_APP_URL = “接口url”
書寫格式：VUE_APP_[自定義name]

這里寫圖片描述

在這里插入圖片描述

配置打包環(huán)境

這里寫圖片描述

在這里插入圖片描述

打包后在本地預(yù)覽,你需要啟動(dòng)一個(gè)node服務(wù)：
1.npm install -g serve  //全局安裝服務(wù)
2.serve -s dist   // 啟動(dòng)服務(wù)預(yù)覽
獲取當(dāng)前的環(huán)境:
console.log(process.env.VUE_APP_URL)

10. 其它配置寫在.vue.config.js文件中
在根目錄下新建
包括端口號(hào)，代理跨域，熱更新，多入口等，具體參考官方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: {  // 一次配置，全局使用，這個(gè)scss 因?yàn)槊總€(gè)文件都要引入
        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的詳細(xì)過程的文章就介紹到這了,更多相關(guān)vue cli3.0環(huán)境打包配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: