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

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

 更新時間:2023年01月17日 15:30:38   作者:素燃  
這篇文章主要介紹了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.上圖兩種選擇方式,第一種是默認的,第二種自己選擇配置
  這里一般選擇第二種自己配置,點擊回車鍵后出現(xiàn)下圖信息

這里寫圖片描述

5.在上圖中選擇你需要的模塊,上下移動,空格進行確定,下圖是測試選擇的

這里寫圖片描述

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

這里寫圖片描述

這里寫圖片描述

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

這里寫圖片描述

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

這里寫圖片描述

9.配置測試環(huán)境接口,線上服務器環(huán)境接口
(通過在項目根目錄下新建.env    .env.development  .env.production文件來控制)
如下圖
關于這一塊的信息,請查看[環(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)境

這里寫圖片描述

在這里插入圖片描述

打包后在本地預覽,你需要啟動一個node服務:
1.npm install -g serve  //全局安裝服務
2.serve -s dist   // 啟動服務預覽
獲取當前的環(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,  // 關閉eslint
    productionSourceMap:true,  // 生產(chǎn)環(huán)境下css 分離文件
    devServer:{   // 配置服務器
        port:8081,
        open:true,
        https:false,
        overlay: {
            warnings: true,
            errors: true
        }
    },
    configureWebpack:{  // 覆蓋webpack默認配置的都在這里
        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'),
            } 
        }
    }
}

到此這篇關于vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細過程的文章就介紹到這了,更多相關vue cli3.0環(huán)境打包配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

最新評論