社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
当我们需要和后台分离部署的时候，必须配置config/index.js:
用vue-cli 自动构建的目录里面 （环境变量及其基本变量的配置）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var path
= require('path')module.exports
= { build:
{ index:
path.resolve(__dirname, 'dist/index.html'), assetsRoot:
path.resolve(__dirname, 'dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', productionSourceMap: true }, dev:
{ port:
8080, proxyTable:
{} }} |
在'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
|
1
2
3
4
5
版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/baidu_31333625/article/details/71603439 站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
官方社群 |
