对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
2017-08-10 16:50
1141 查看
当我们需要和后台分离部署的时候,必须配置config/index.js:
用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置)
在'build'部分,我们有以下选项:
必须是本地文件系统上的绝对路径。
如果你在后台框架中使用此模板,你可以编辑
必须是本地文件系统上的绝对路径。
应该指向包含应用程序的所有静态资产的根目录。
被webpack编译处理过的资源文件都会在这个
那么所以webpack资源会被编译到
每次编译前,这个目录会被清空,所以这个只能放编译出来的资源文件。
这个是通过http服务器运行的url路径。在大多数情况下,这个是根目录(
后台有要求的话一般要加上./ 或者根据具体目录添加,不然引用不到静态资源
在构建生产环境版本时是否开启source map。
开发服务器监听的特定端口
定义开发服务器的代理规则。
项目中配置的config/index.js,有dev和production两种环境的配置 以下介绍的是production环境下的webpack配置的理解
下面是vue中的build/webpack.base.conf.js
webpack.prod.conf.js 生产环境下的配置文件
vue 中build/build.js页面
项目入口,由package.json 文件可以看出
当我们执行 npm run dev / npm run build / npm run watch时运行的是 node build/dev-server.js 或 node build/build.js 或node build/build-watch.js
node build/build-watch.js 是我配置的载production环境的配置基础上在webpack的配置模块加上 watch:true 便可实现代码的实时编译
用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置)
在'build'部分,我们有以下选项:
build.index
必须是本地文件系统上的绝对路径。index.html(带着插入的资源路径) 会被生成。
如果你在后台框架中使用此模板,你可以编辑
index.html路径指定到你的后台程序生成的文件。例如Rails程序,可以是
app/views/layouts/application.html.erb,或者Laravel程序,可以是
resources/views/index.blade.php。
build.assetsRoot
必须是本地文件系统上的绝对路径。应该指向包含应用程序的所有静态资产的根目录。
public/对应Rails/Laravel。
build.assetsSubDirectory
被webpack编译处理过的资源文件都会在这个build.assetsRoot目录下,所以它不可以混有其它可能在
build.assetsRoot里面有的文件。例如,假如
build.assetsRoot参数是
/path/to/dist,
build.assetsSubDirectory参数是
static,
那么所以webpack资源会被编译到
path/to/dist/static目录。
每次编译前,这个目录会被清空,所以这个只能放编译出来的资源文件。
static/目录的文件会直接被在构建过程中,直接拷贝到这个目录。这意味着是如果你改变这个规则,所有你依赖于
static/中文件的绝对地址,都需要改变。
build.assetsPublicPath【资源的根目录】
这个是通过http服务器运行的url路径。在大多数情况下,这个是根目录(/)。如果你的后台框架对静态资源url前缀要求,你仅需要改变这个参数。在内部,这个是被webpack当做
output.publicPath来处理的。
后台有要求的话一般要加上./ 或者根据具体目录添加,不然引用不到静态资源
build.productionSourceMap
在构建生产环境版本时是否开启source map。
dev.port
开发服务器监听的特定端口
dev.proxyTable
定义开发服务器的代理规则。项目中配置的config/index.js,有dev和production两种环境的配置 以下介绍的是production环境下的webpack配置的理解
1 var path = require('path') 2 3 module.exports = { 4 build: { // production 环境 5 env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境 6 index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件 7 assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径 8 assetsSubDirectory: 'static', // 编译输出的二级目录 9 assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名 10 productionSourceMap: true, // 是否开启 cssSourceMap 11 // Gzip off by default as many popular static hosts such as 12 // Surge or Netlify already gzip all static assets for you. 13 // Before setting to `true`, make sure to: 14 // npm install --save-dev compression-webpack-plugin 15 productionGzip: false, // 是否开启 gzip 16 productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名 17 }, 18 dev: { // dev 环境 19 env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境 20 port: 8080, // 运行测试页面的端口 21 assetsSubDirectory: 'static', // 编译输出的二级目录 22 assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名 23 proxyTable: {}, // 需要 proxyTable 代理的接口(可跨域) 24 // CSS Sourcemaps off by default because relative paths are "buggy" 25 // with this option, according to the CSS-Loader README 26 // (https://github.com/webpack/css-loader#sourcemaps) 27 // In our experience, they generally work as expected, 28 // just be aware of this issue when enabling this option. 29 cssSourceMap: false // 是否开启 cssSourceMap 30 } 31 }
下面是vue中的build/webpack.base.conf.js
vue 中build/build.js页面
1 // https://github.com/shelljs/shelljs 2 require('./check-versions')() // 检查 Node 和 npm 版本 3 require('shelljs/global') // 使用了 shelljs 插件,可以让我们在 node 环境的 js 中使用 shell 4 env.NODE_ENV = 'production' 5 6 var path = require('path') 7 var config = require('../config') // 加载 config.js 8 var ora = require('ora') // 一个很好看的 loading 插件 9 var webpack = require('webpack') // 加载 webpack 10 var webpackConfig = require('./webpack.prod.conf') // 加载 webpack.prod.conf 11 12 console.log( // 输出提示信息 ~ 提示用户请在 http 服务下查看本页面,否则为空白页 13 ' Tip:\n' + 14 ' Built files are meant to be served over an HTTP server.\n' + 15 ' Opening index.html over file:// won\'t work.\n' 16 ) 17 18 var spinner = ora('building for production...') // 使用 ora 打印出 loading + log 19 spinner.start() // 开始 loading 动画 20 21 /* 拼接编译输出文件路径 */ 22 var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 23 rm('-rf', assetsPath) /* 删除这个文件夹 (递归删除) */ 24 mkdir('-p', assetsPath) /* 创建此文件夹 */ 25 cp('-R', 'static/*', assetsPath) /* 复制 static 文件夹到我们的编译输出目录 */ 26 27 webpack(webpackConfig, function (err, stats) { // 开始 webpack 的编译 28 // 编译成功的回调函数 29 spinner.stop() 30 if (err) throw err 31 process.stdout.write(stats.toString({ 32 colors: true, 33 modules: false, 34 children: false, 35 chunks: false, 36 chunkModules: false 37 }) + '\n') 38 })
项目入口,由package.json 文件可以看出
node build/build-watch.js 是我配置的载production环境的配置基础上在webpack的配置模块加上 watch:true 便可实现代码的实时编译
相关文章推荐
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】
- Webpack配置详解(package.json/webpack.config.js详细配置 )
- vue.js开发外卖App项目总结之webpack的详细配置(三)
- webpack + vuejs(都是1.0的版本) 基本配置(一)
- vue-cli创建的项目不需要再创建webpack-config.js文件,因为已经配置过了
- vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析
- vue-cli的webpack模板项目配置文件的理解
- webpack---webpack.config.js配置基本要素entry、output、loader、plugins等
- webpack2-webpack.config.js配置
- webpack2-webpack.config.js配置
- vue-cli脚手架config目录下index.js配置文件详解
- webpack学习-webpack.config.js配置
- 在编译向该请求提供服务所需资源的过程中出现错误。请检查下列特定错误详细信息并适当地修改源代码。 编译器错误消息: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\41c191fd\ff9345c5\App_Web_login.cshtml.65793277
- vue-cli脚手架build目录中的webpack.base.conf.js配置文件
- webpack.config.js文件的高级配置
- 基于vue.js 2.0,不使用webpack的nodejs服务,只在浏览器上单独使用在Element UI的Tree树形控件
- webpack2-webpack.config.js配置
- webpack.config.js配置文件