前言
本文系統(tǒng)的梳理了vue-cli3搭建項目的常見用法，目的在于讓你快速掌握獨立搭建vue項目的能力。你將會了解如下知識點：

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、興隆網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、購物商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為興隆等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

如何安裝項目插件
添加瀏覽器支持
如何配置scss/stylus共享全局變量
如何整合elementUI等第三方框架并實現(xiàn)按需引入
配置單/多頁面
如何配置自定義環(huán)境變量
如何在vue.config.js定制自己的webpack
vue項目部署
說明
本文末尾會給出一個以上提到的所有功能的一個配置文件，可供大家學(xué)習參考。

思維導(dǎo)圖

接下來，我們根據(jù)思維導(dǎo)圖，一步步來解釋和實現(xiàn)我們的目標。
1.安裝項目插件
vue add @vue/cli-plugin-eslint

或

vue add xjFile
復(fù)制代碼
vue add 的設(shè)計意圖是為了安裝和調(diào)用 Vue CLI 插件。對于普通的 npm 包而言，我們?nèi)匀豢梢裕ǜ鶕?jù)所選的 npm 包）使用包管理器。最后可以在vue.config.js做webpack自定義配置

2.添加瀏覽器支持
browserslist
我們可以通過package.json 文件里的 browserslist字段或一個單獨的 .browserslistrc 文件來指定項目的目標瀏覽器的范圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉(zhuǎn)譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴

例如：

// .browserslistrc

1%
last 2 versions
復(fù)制代碼
想要獲取更多browserslist，可移步browserslist

Polyfill
默認情況下，cli會把 useBuiltIns: 'usage' 傳遞給 @babel/preset-env，這樣它會根據(jù)源代碼中出現(xiàn)的語言特性自動檢測需要的 polyfill。這確保了最終包里 polyfill 數(shù)量的最小化。但是如果其中一個依賴需要特殊的 polyfill，默認情況下 Babel 無法將其檢測出來。我們可以通過如下三種方式解決此類問題：

將依賴添加到 vue.config.js 中的 transpileDependencies 選項
// vue.config.js
module.exports = {
// 默認情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉(zhuǎn)譯一個依賴，可以在這個選項中列出來
transpileDependencies: ['glob']
}
復(fù)制代碼
可以使用 @vue/babel-preset-app 的 polyfills 選項預(yù)包含所需要的 polyfill
// babel.config.js
module.exports = {
presets: [
['@vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
}
復(fù)制代碼
使用 useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill',這種方式的問題就是會增加包的大小
3.配置scss/stylus共享全局變量
對與scss，可以使用如下方式開啟：

// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
// 這里假設(shè)你有 src/variables.scss 文件
data: @import "~@/variables.scss";
}
}
}
}
復(fù)制代碼
對于stylus，本人親測使用如上方式無效，可以通過如下方式實現(xiàn)：

vue add style-resources-loader

// vue.config.js
const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
'patterns': [
path.resolve(__dirname, 'src/styles/abstracts/*.styl'),
]
}
}
}
復(fù)制代碼
4.整合eleemntUI等第三方框架并實現(xiàn)按需引入
安裝babel-plugin-component
npm install babel-plugin-component -D
復(fù)制代碼
配置babel.config.js
module.exports = {
presets: ['@vue/app',
br/>'@vue/app',
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
復(fù)制代碼
此時即可按需引入element組件，優(yōu)化項目體積了。

5.配置單/多頁面
vue-cli默認單頁面結(jié)構(gòu)，我們可以通過配置文件來將項目配置成多頁面：

// vue.config.js
const path = require('path')
module.exports = {
// 單/多頁面
pages: {
index: {
// page 的入口
entry: 'src/home/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'index.html',
// 當使用 title 選項時，
// template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Your Web For PC',
// 在這個頁面中包含的塊，默認情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
// chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 當使用只有入口的字符串格式時，
// 模板會被推導(dǎo)為 public/subpage.html
// 并且如果找不到的話，就回退到 public/index.html。
// 輸出文件名會被推導(dǎo)為 subpage.html。
// subpage: 'src/subpage/main.js'
},
}
復(fù)制代碼
6.如何配置自定義環(huán)境變量
你可以替換你的項目根目錄中的下列文件來指定環(huán)境變量：

.env # 在所有的環(huán)境中被載入
.env.local # 在所有的環(huán)境中被載入，但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
復(fù)制代碼
如下：

// .env.local
APPID=123
VUE_APP_SECRET=secret
復(fù)制代碼
如果你想在客戶端側(cè)代碼中使用環(huán)境變量，變量名因以 VUE_APP_開頭，如下可獲取定義的環(huán)境變量：

console.log(process.env.VUE_APP_SECRET)
復(fù)制代碼
7.如何在vue.config.js定制自己的webpack
我們可以使用cli支持的鏈式調(diào)用，或者自定義調(diào)用：

// vue-cli內(nèi)部webpack配置
chainWebpack: config => {
// 設(shè)置快捷目錄別名
config.resolve.alias.set('utils',resolve('../utils'))

    // 修改靜態(tài)資源打包方式，下例為超過10k才用文件導(dǎo)入的方式，否則為base64.默認為4k
    // config.module
    // .rule('images')
    //     .use('url-loader')
    //     .loader('url-loader')
    //     .tap(options => Object.assign(options, { limit: 10240 }))
},
// webpack自定義配置
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 為生產(chǎn)環(huán)境修改配置...
    } else {
      // 為開發(fā)環(huán)境修改配置...
    }
}

復(fù)制代碼
7.vue項目部署
這里我們使用shell腳本部署，當然大家也可以使用自己熟悉的方式部署：

#!/usr/bin/env sh

當發(fā)生錯誤時中止腳本

set -e

構(gòu)建

npm run build

cd 到構(gòu)建輸出的目錄

cd dist

git init
git add -A
git commit -m 'deploy'

git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master

cd -
復(fù)制代碼
最后，上一張相對完整的配置清單：
// vue.config.js
// 自定義vue配置
const path = require('path');
const resolve = dir => path.join(__dirname, dir);
// mock數(shù)據(jù)
const mockData = require('./mock/test.json');

module.exports = {
// 基本路徑
publicPath: './',

// 輸出文件目錄
// outputDir: 'dist',

// eslint-loader 是否在保存的時候檢查
// lintOnSave: true,

// 單/多頁面
pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當使用 title 選項時，
      // template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'OpenCoder For PC',
      // 在這個頁面中包含的塊，默認情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
    //   chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當使用只有入口的字符串格式時，
    // 模板會被推導(dǎo)為 `public/subpage.html`
    // 并且如果找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會被推導(dǎo)為 `subpage.html`。
    // subpage: 'src/subpage/main.js'
},

// css相關(guān)配置
css: {
    // 是否使用css分離插件 ExtractTextPlugin
    extract: true,
    // 開啟 CSS source maps?
    sourceMap: false,
    // css預(yù)設(shè)器配置項
    loaderOptions: {
        // stylus: {
        //     // @/ 是 src/ 的別名
        //     // 所以這里假設(shè)你有 `src/variables.stylus` 這個文件, 不過目前測試無效
        //     data: `@import "~@/style/variables.styl";`
        //   }
    },
    // 啟用 CSS modules for all css / pre-processor files.
    modules: false

},

pluginOptions: {
    // 共享變量
    'style-resources-loader': {
        preProcessor: 'stylus',
        patterns: [
            //這個是加上自己的路徑，
            //注意：試過不能使用別名路徑
            resolve('src/style/variables.styl'),
        ]
    }
},

devServer: {
    // 端口
    port: 3000,

    // 配置代理
    proxy: {
        '^/api': {
          target: 'http://localhost:8081',
          ws: true,
          changeOrigin: true
        },
        '^/data': {
          target: 'http://localhost:3000'
        }
    },

    // mock
    before(app){
        app.get('/api/getUser',(req,res,next)=>{
            res.json(mockData);
        })
    }
},
// vue-cli內(nèi)部webpack配置
chainWebpack: config => {
    // 設(shè)置快捷目錄別名
    config.resolve.alias.set('utils',resolve('../utils'))

    // 修改靜態(tài)資源打包方式，下例為超過10k才用文件導(dǎo)入的方式，否則為base64.默認為4k
    // config.module
    // .rule('images')
    //     .use('url-loader')
    //     .loader('url-loader')
    //     .tap(options => Object.assign(options, { limit: 10240 }))
},
// webpack配置
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 為生產(chǎn)環(huán)境修改配置...
    } else {
      // 為開發(fā)環(huán)境修改配置...
    }
}

}

// babel.config.js
module.exports = {
presets: ['@vue/app',
br/>'@vue/app',
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

// .browserslistrc

1%
last 2 versions

// package.json
{
"name": "pc",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:serve": "serve -s dist",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"clipboard": "^2.0.4",
"core-js": "^2.6.5",
"element-ui": "^2.9.1",
"register-service-worker": "^1.6.2",
"serve": "^11.0.2",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-plugin-pwa": "^3.8.0",
"@vue/cli-plugin-unit-mocha": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-plugin-component": "^1.1.1",
"chai": "^4.1.2",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"style-resources-loader": "^1.2.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-style-resources-loader": "^0.1.3",
"vue-template-compiler": "^2.6.10"
}
}

復(fù)制代碼
本文梳理了一個最基本的cli3項目配置流程，我們可以根據(jù)這個思維導(dǎo)圖，去搭建自己的項目。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁標題：一張圖教你快速玩轉(zhuǎn)vue-cli3-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://chinadenli.net/article48/dosgep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、面包屑導(dǎo)航、云服務(wù)器、手機網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)