12. Vue搭建本地服務

盛開的太陽發表於2021-03-05
Vue

一. 搭建本地伺服器

本地服務可以提高開發效率. webpack不需要每次都打包, 就可以看到修改後的效果. 本地伺服器基於node.js搭建, 內部使用二十express框架. 可以實現讓瀏覽器自動重新整理的功能.

1. 安裝本地服務模組

npm install --save-dev webpack-dev-server@2.9.1
  • --save-dev: 本地服務只有在開發環境的時候才會使用, 所以, 我們以dev模式安裝, 打包的時候不會被打包
  • webpack-dev-server@2.9.1: 這個版本是Vue2對應的版本. 

安裝的時候可能會報異常

12. Vue搭建本地服務

 

 這個問題是因為我是mac本, 沒有安裝Xcode, 我們執行下面的命令安裝一下xcode的外掛就可以了

  • 執行下面的命令, 輸入密碼
sudo rm -rf $(xcode-select -print-path)

  • 安裝Xcode外掛

sudo xcode-select --install

 

然後在執行npm install --save-dev webpack-dev-server@2.9.1就成功了.

2. 配置webpack.config.js

 devServer: {
        contentBase: "./dist",
        inline: true
}
  • contentBase: 為哪一個資料夾提供本地服務, 預設是根資料夾
  • port: 埠號
  • inline: 頁面實時重新整理
  • historyApiFallback: 在SPA頁面中, 依賴HTML5的history模式

3. 配置package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },

這句話的含義是, 將本地服務交由webpack來管理. 

4. 啟動本地服務

npm run dev

啟動成功!

12. Vue搭建本地服務

 

 我們還可以啟動服務後直接開啟瀏覽器

可以在命令列後面加一個--open

"dev": "webpack-dev-server --open"

 

二. 服務配置檔案抽離

為了能夠更好的管理配置檔案, 我們將配置檔案進行分離.

抽離的原則是: 開發環境的配置放在一個檔案, 需要打包到線上的配置放在一個檔案, 這樣管理起來更清晰,更方便.

第一步: 建立一個目錄build, 然後在裡面建立三個檔案

1. base.config.js

2. dev.config.js

3. prod.config.js

12. Vue搭建本地服務

第二步: 把webpack.config.js中的內容

  • 公共的部分拷貝到base.config.js中. 
  • 開發環境的配置拷貝到dev.config.js中
  • 需要構建的部分拷貝到prod.config.js中

base.config.js

const path = require("path")
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const UglifyJsWebpackPlugin = require("uglifyjs-webpack-plugin")
module.exports={
    // 入口
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        //publicPath:"dist/"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader' ]
            }, {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },{
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [ {
                    loader: 'url-loader',
                    options: {
                        // 當載入的圖片,  小於limit時, 會將圖片編譯成base64字串形式. --- 不需要檔案, 因為他是一個base64字串
                        // 當載入的圖片, 大於limit是, 需要使用file-loader模組來載入. --- 當檔案來處理, 就需要打包成檔案, 需要file-loader
                        // 這是載入的檔案目錄是根目錄, 結果找不到檔案, 所以也不顯示, 我們可以在output位置增加publicPath:"dist/" 這樣, 所有的路徑類的都會加上這個路徑
                        limit: 13000,
                    }
                }]
            },{
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    resolve:{
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        // 增加版權資訊
        new webpack.BannerPlugin(`
            @author lxl
            @data 2021-03-03
            @desc *****
        `),
        // 打包index.html到dist中
        new HtmlWebpackPlugin({
            template: "index.html"
        }),
    ]
}

dev.config.js

module.exports={
    devServer: {
        contentBase: "./dist",
        inline: true
    }
}

prod.config.js

module.exports={
    plugins: [
        // 壓縮js檔案--開發階段, 不要壓縮
        new UglifyJsWebpackPlugin()
    ]
}

 

第三步: 組合配置檔案

現在原來的一個webpack.config.js配置檔案變成了三個配置檔案. 

開發環境使用: base.config.js 和 dev.config.js

線上環境使用: base.config.js 和 prod.config.js

那麼, 匯入配的時候, 如何將其合併呢?

我們需要安裝一個外掛webpack-merge. 這個外掛可以幫助我們將兩個配置檔案進行合併

npm install webpack-merge@3.0.0

然後在dev.config.js和prod.config.js中引入base.config.js. 來看看引入後的檔案

dev.config.js

const webpackMerge = require("webpack-merge")
const baseconfig = require("./base.config")
module.exports = webpackMerge(baseconfig, {
    devServer: {
        contentBase: "./dist",
        inline: true
    }
})

prod.config.js

const UglifyJsWebpackPlugin = require("uglifyjs-webpack-plugin")
const webpackMerge = require("webpack-merge")
const baseConfig = require("./base.config")
module.exports = webpackMerge(baseConfig, {
    plugins: [
        // 壓縮js檔案--開發階段, 不要壓縮
        new UglifyJsWebpackPlugin()
    ]
})

在這裡引入了webpackMerge的包,然後使用webpackMerge(配置檔案1, 配置檔案2), 將兩個配置檔案合併

第三步:然後修改輸出檔案的路徑

因為我們的配置檔案目錄修改了, 所以需要重新設定打包的輸出路徑

修改base.config.js

module.exports={
    // 入口
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        //publicPath:"dist/"
    },
....
}

第四步: 在package.json中指定配置檔案

預設讀取的配置檔案是webpack.config.js, 現在我們定義了自己的配置檔案, 所以, 需要指定讀取配置檔案

修改package.json

{
  "name": "meet",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config './build/prod.config.js'",
    "dev": "webpack-dev-server --open --config './build/dev.config.js'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^2.0.0",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^2.3.0",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "dependencies": {
    "vue": "^2.6.12"
  }
}

通過--config指定讀取的配置檔案

 "build": "webpack --config './build/prod.config.js'",
 "dev": "webpack-dev-server --open --config './build/dev.config.js'"

第五步: 刪除webpack.config.js

 

第六步: 構建專案並執行

npm run build

然後執行專案

npm run dev

 

相關文章