How vue-cli2 + webpack construction project vue make static resources such as images and js go cdn, where you can configure it? Now I Details
1.config / index.js can see
module.exports = { dev: {...}, build: { assetsSubDirectory: 'static', assetsPublicPath: '/', }
dev relative to the local development and debugging use, build for publishing environment
Cdn assetsPublicPath which is to configure static resources, we can re-configure our path cdn corresponding here, such as:
assetsPublicPath: 'https://baidu.com/' ,
2. Of course, if there is only one environment, we just need to how assetsPublicPath written inside dead on the line, but we tend to have multiple environments, such as testing, pre-release, development and so on, that configure it?
First, we distinguish between currently running that environment, node. js commands that can take parameters, so we just re-compile command with parameters for the environment can be, for vue have a special
reliance on environmental release, refer to: http://www.likecs.com/show-61513 .html
First, the installation-dependent: cross-env
Use cross-env solve the problem of cross-platform environment variable settings
安装:npm i --save-dev cross-env
Second, modify the project file 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" },
as the picture shows
Here is the command to modify packaging, packaging will later use the following command:
Online Development Environment: npm run build: dev line test environment: npm run build: test line prefire environment: npm run build: pre online production: npm run build: prod
NODE_ENV = xxx ENV_CONFIG = xxx set NODE_ENV webpack when packaged, ENV_CONFIG environment variables
Third, modify the project config configuration file
The following files under the modified project config directory
1, add test.env.js file
'use strict' module.exports = { NODE_ENV: "" Testing " ', ENV_CONFIG:" "Test"', API_ROOT: "" HTTP: // (request address line test environment) " ' }
2, add pre.env.js file
'use strict' module.exports = { NODE_ENV: '' Presentation '', ENV_CONFIG: '' pre ' ", API_ROOT:" "HTTP: // (online environment prefire request address)' ' }
3, modify the file dev.env.js
'use strict' const = Merge the require ( 'WebPACK-Merge') const = prodEnv the require ( './ prod.env') // command line parameters acquired NODE_ENV const = process.env.NODE_ENV the env module.exports = Merge (prodEnv, { NODE_ENV: '' development '', ENV_CONFIG: '' dev '', API_ROOT: env === 'development'? ' "HTTP: // (address request online development environment)' ':' '/ api " '// dev environment formulated service agent, API_ROOT the api is formulated proxy address })
4, modify the file prod.env.js
'use strict' module.exports = { NODE_ENV: '' Production ' ", ENV_CONFIG:'" Prod " ', API_ROOT:" "HTTP: // (request address line production)" " }
5, modify the file 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, }
Following the steps above you can configure multiple perfect solution to the environment.