VUE +のVUE-CLI2 + WebPACKのリソース割り当てCDN

どのようにVUE-CLI2 + WebPACKの建設プロジェクトVUEは、イメージなどの静的リソースを作成し、jsのCDNを行く、あなたはそれをどこに設定することができますか？今I詳細

1.config / index.jsを見ることができます

module.exportsは= { 
  DEV：{...}、

  ビルド：{ 
    assetsSubDirectory： '静的' 、
    assetsPublicPath： '/' 、
}

地元の開発とデバッグに使用するのdevの相対的な、パブリッシング環境用にビルド

静的リソースを構成することであるCDN assetsPublicPathは、我々のような、ここで対応するCDN私たちのパスを再設定することができます。

assetsPublicPath：「https://baidu.com/」は、

一つだけの環境がある場合はもちろん、2、私達はちょうどに必要 assetsPublicPathがライン上で死んだの内側に書かれたか、私たちは、そのようにように、テスト、プレリリース、開発、などの複数の環境を、持っている傾向がありますそれを設定？
　　まず、我々は、現在その環境を実行している間のノードを区別します。VUEのパラメータを取ることができますので、環境のためのパラメータを持つ我々だけで再コンパイルコマンドをすることができjsのコマンドは、特別な持っている
環境への放出への依存を、を参照してください。http://www.likecs.com/show-61513 .htmlを

まず、インストールに依存する：クロスENV

クロスプラットフォーム環境変数の設定の問題を解決するためのクロスENVを使用します

安装：NPM I --save-devのクロスENV

 

第二に、プロジェクトファイルpackage.jsonを変更

"スクリプト"：{ 
    "DEV"： "のWebPACK-devのサーバー--inline --progress --config / webpack.dev.conf.jsを構築する"、
    "スタート"： "NPMの実行DEV"、
    "糸くず"： " eslint --extの.js、.vue SRC --fix " 
    "ビルド：DEV"： "クロスENV NODE_ENV =開発ENV_CONFIG = DEVノードビルド/ build.js"、
    "ビルド：試験"："クロスENV NODE_ENV =試験ENV_CONFIG =テストノードビルド/ build.js " 
    "ビルド：プレ"： "クロスENV NODE_ENV =提示ENV_CONFIG =プレノードビルド/ build.js"、
    "ビルド：PROD"："クロスのenv NODE_ENV =生産ENV_CONFIG = PRODノードビルド/ build.js」
  }、

 

図に示すように。

ここでの包装は、包装は後で、次のコマンドを使用します。変更するためのコマンドは次のとおりです。

オンライン開発環境：DEV：ビルド実行NPM 
ラインテスト環境を：テスト：ビルド実行NPM 
ライン予備吐出環境を：ビルドを実行NPM：事前に
オンライン生産：PROD：ビルドを実行NPM

NODE_ENV = xxxはENV_CONFIG = xxxはパッケージセットNODE_ENVのWebPACKの、ENV_CONFIG環境変数

第三に、プロジェクトのconfig設定ファイルを変更します

変更されたプロジェクトのconfigディレクトリの下に、次のファイル

1、test.env.jsファイルを追加

'厳格な使用' 
module.exportsは= { 
  ""テスト""、NODE_ENV 
  ENV_CONFIG： ' "テスト"'、
  API_ROOT： "" HTTP：//（要求アドレスラインテスト環境）」を「
}

2、pre.env.jsファイルを追加

'厳格な使用' 
module.exportsは= { 
  NODE_ENVを： 'プレゼンテーション''、
  ENV_CONFIG： ''プレ' " 
  API_ROOT："「HTTP：//（オンライン環境予備吐出要求アドレス）」 ' 
}

3、ファイルdev.env.jsを変更

'厳格な使用' 
が必要（ 'WebPACKの-マージ'）をマージ=定数を
CONST = prodEnvが必要（ './ prod.env'）

NODE_ENVの取得//コマンドラインパラメータ
CONST = process.env.NODE_ENVにENVの

module.exportsはし=マージ（prodEnv、{ 
  NODE_ENV： ''開発''、
  ENV_CONFIG： '' DEV ''、
  API_ROOT：ENV === '開発' '「HTTP：//（アドレス要求オンライン開発環境）'？ '：' '/ API "「//のdevの環境策定サービス・エージェント、API_ROOT APIが処方されるプロキシアドレス
}）

4、ファイルprod.env.jsを変更

'厳格な使用' 
= module.exportsはを{ 
  NODE_ENV： ''生産' " 
  ENV_CONFIG：'"のProd "」、
  API_ROOT：" "HTTP：//（要求アドレスライン生産）" " 
}

5、ファイルを変更index.js

由于本地运行时会产生浏览器跨域的问题，在此文件中配置服务代理。

dev参数下修改如下配置：

proxyTable: {
  '/api': {
    target: 'http://(本地开发环境请求地址)',
    changeOrigin: true, // 是否允许跨域
    pathRewrite: {
      '^/api': '' // 重写
    }
  },
},

 // api是配制的代理地址

如下图所示

build参数下添加如下参数

devEnv: require('./dev.env'),
testEnv: require('./test.env'),
preEnv: require('./pre.env'),
prodEnv: require('./prod.env'),

参数名与文件名对应，此处参数将在 build/webpackage.prod.conf.js 中使用到

将 build 参数下的 assetsPublicPath 参数值修改为 ’./’

如下图所示

config目录结构如图

 

四、修改项目build配置文件

修改项目build目录下的以下文件

1、 修改build.js文件

// process.env.NODE_ENV = 'production'  // 将此行代码注释

// const spinner = ora('building for production...')
const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.ENV_CONFIG + ' production...')

如图所示

2、修改utils.js文件

添加各打包环境设置，也可以不改动，将 package.json 文件中的打包命令

cross-env NODE_ENV=xxx ENV_CONFIG=xxx node build/build.js

中的参数 NODE_ENV=xxx 都设为 NODE_ENV=production

原代码
exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}


修改后
exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'presentation'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}

这里涉及到打包和本地运行时所读取的config/index.js文件中的assetsSubDirectory参数路径

3、修改webpack.base.conf.js文件

添加各打包环境设置，也可以不改动，将package.json文件中的打包命令

cross-env NODE_ENV=xxx ENV_CONFIG=xxx node build/build.js

中的参数 NODE_ENV=xxx 都设为 NODE_ENV=production

原代码
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },


修改后
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'presentation'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

 

4、修改webpack.prod.conf.js文件

原代码
const env = require('../config/prod.env')


修改后
const env = config.build[process.env.ENV_CONFIG+'Env']

如图所示

将会根据各打包环境设置的参数选择读取 config/index.js 文件下 build 参数中设置的环境配置参数，从而读取到 config 目录下配置的各打包环境的js文件

五、项目中HTTP请求设置

注意符号不是单引号而是反引号

本项目中所有请求统一在api文件中管理，在js文件中获取到各环境配置的请求地址将其添加到请求路径中。

 

如果是直接在文件中调用可将请求地址参数挂载到Vue上进行全局调用

在main.js文件中添加

Vue.prototype.baseURL = process.env.API_ROOT

使用时请求路径参数为

url: `${this.baseURL}/platform/systemUser/login`

六、配置相当于环境cdn

再config/index.js增加如下判断：

let cdn_path = './'
if (process.env.ENV_CONFIG === 'dev') {
  cdn_path = 'https://dev-baidu.com/dev/wx/';
} else if (process.env.ENV_CONFIG === 'prod') {
  cdn_path = 'https://baidu.com/prod/wx/';
}
else if (process.env.ENV_CONFIG === 'test') {
  cdn_path = 'https://test-baidu.com/test/wx/';
}
else if (process.env.ENV_CONFIG === 'pre') {
  cdn_path = 'https://pre-baidu.com/pre/wx/';
}

build: {
...
assetsPublicPath：cdn_path、
}

あなたの上記の手順に従うことで、環境への複数の完璧なソリューションを構成することができます。