vue-cli2項目根據不一樣環境引用不一樣CDN

時間 2020-04-05

標籤 vue cli2 cli 項目根據不一樣環境引用 cdn 欄目網絡硬件简体版

原文原文鏈接

環境配置文件:css

// dev.env.js
'use strict'

module.exports = {
    CDN_PATH: '"http://statictest.ucarinc.com/"'
}

// prod.env.js
'use strict'

module.exports = {
    CDN_PATH: '"https://inner.10101111cdn.com/"'
}

生產環境webpack：html

// webpack.dev.conf.js
const env = require('../config/dev.env')
module.exports = {
    entry: {},
    output: {},
    resolve: {},
    externals: {},
    module: {},
    plugins: [
        new HtmlWebpackPlugin({
          base_home: env.CDN_PATH.replace(/^\"|\"$/g, ''),
          // coding
        }),
    ]
}

生產環境：webpack

// webpack.prod.conf.js
const env = require('../config/prod.env')
module.exports = {
    entry: {},
    output: {},
    resolve: {},
    externals: {},
    module: {},
    plugins: [
        new HtmlWebpackPlugin({
          base_home: env.CDN_PATH.replace(/^\"|\"$/g, ''),
          // coding
        }),
    ]
}

在index.html模板中更改請求域名web

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <title>採購管理系統</title>
  <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.base_home%>??static/ucar-view-2.0.6.css" />
</head>
<body>
  <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="<%= htmlWebpackPlugin.options.base_home%>??static/ucar-view.umd.min-2.0.6.js"></script>
    </script>
  </body>
</html>

以上有幾點須要注意：
一、dev.env.js或者prod.env.js文件中定義CDN_PATH變量須要同時加上單引號和雙引號，否則會報錯
二、可是CDN_PATH加上雙引號以後，htmlWebpackPlugin.options.base_home值爲"http://statictest.ucarinc.com/"，在script使用就會變成<script src=""http://statictest.ucarinc.com/"??static/ucar-view.umd.min-2.0.6.js"></script>，這個連接是有問題的，解決方法是在HtmlWebpackPlugin插件中定義是去掉雙引號base_home: env.CDN_PATH.replace(/^\"|\"$/g, '')app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。