vue+vue-cli2+webpack配置资源cdn

vue-cli2+webpack构建的vue项目如何让图片和js等静态资源走cdn，哪里可以配置呢？下面我详细介绍

1.config/index.js中可以看到

module.exports = {
  dev: {...},

  build: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
}

dev相对于本地开发调试用的，build对于发布环境

其中assetsPublicPath就是配置静态资源的cdn，我们可以再这里配置我们对应的cdn路径，比如：

assetsPublicPath: 'https://baidu.com/',

2.当然如果只有一个环境，我们只需要assetsPublicPath里面写死就行，但是我们往往有多个环境，比如测试、预发布、开发等等，那如何配置呢？
　　首先我们区分当前运行的是那个环境，node。js命令是可以带参数的，所以我们只要再编译的命令带上环境的参数就可以了，对于vue有一个专门
对于环境发布的依赖，参考：http://www.likecs.com/show-61513.html

一、安装依赖：cross-env

使用cross-env解决跨平台设置环境变量的问题

安装：npm i --save-dev cross-env

 

二、修改项目package.json文件

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src --fix",
    "build:dev": "cross-env NODE_ENV=development ENV_CONFIG=dev node build/build.js",
    "build:test": "cross-env NODE_ENV=testing ENV_CONFIG=test node build/build.js",
    "build:pre": "cross-env NODE_ENV=presentation ENV_CONFIG=pre node build/build.js",
    "build:prod": "cross-env NODE_ENV=production ENV_CONFIG=prod node build/build.js"
  },

 

如图所示

这里是修改打包命令，以后打包将使用以下命令：

线上开发环境：npm run build:dev
线上测试环境：npm run build:test
线上预发环境：npm run build:pr