Vue2.0项目根据线上环境分别打出测试包和生产包

最新推荐文章于 2024-01-24 17:06:09 发布

Upward Force

最新推荐文章于 2024-01-24 17:06:09 发布

阅读量1k

点赞数 3

分类专栏： vue 文章标签： vue.js webpack cli node.js css

本文链接：https://blog.csdn.net/qq_43884155/article/details/112947883

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、来到package.json

修改前
在这里插入图片描述
修改后

2、在 /build 目录下新增 test.js

2.1 内容可以直接拷贝同目录下 build.js 的内容，但是需要修改三处地方

在这里插入图片描述
2.2 修改前

1、process.env.NODE_ENV = 'production'
2、const webpackConfig = require('./webpack.prod.conf')
3、const spinner = ora('building for production...')

在这里插入图片描述
2.3、修改后

1、process.env.NODE_ENV = 'test'
2、const webpackConfig = require('./webpack.test.conf')
3、const spinner = ora('building for test...')	// 可以不修改，只是提示语

在这里插入图片描述
3、在 /build 目录下新增 webpack.test.conf.js

3.1 内容可以直接拷贝同目录下 webpack.prod.conf.js 的内容，但是需要修改一处地方
在这里插入图片描述
3.2 修改前

3.3 修改后

4、在 /config 目录下新增 test.env.js

4.1 内容可以直接拷贝同目录下 prod.env.js 的内容，但是需要修改一处地方
在这里插入图片描述
4.2 修改前

4.3 修改后

5、重新来到 /build/build.js 或 /build/test.js

5.1 发现

/build/build.js 中引入了 /config/index.js 文件
/build/build.js 中引入了 /build/webpack.prod.conf.js 文件，而 /build/webpack.prod.conf.js 中又引入了 /build/utils.js 和 /build/webpack.base.conf.js 文件
/build/webpack.base.conf.js 中引入了 /build//vue-loader.conf.js 文件

5.2 修改 /config/index.js，共需要修改3处。

根据 process.env.NODE_ENV 区分测试包和正式包，并分别打包到不同的文件里，并对不同的资源地址分开打包

修改前
在这里插入图片描述
修改后

5.3 修改 /build/utils.js，共需要修改一处地方

加上 process.env.NODE_ENV === ‘test’ 打包测试包和打包正式包的配置一样

修改前
在这里插入图片描述
修改后

5.4 修改 /build/webpack.base.conf.js，共需要修改一处地方

加上 process.env.NODE_ENV === ‘test’ 打包测试包和打包正式包的配置一样

修改前
在这里插入图片描述
修改后

5.5 修改 /build//vue-loader.conf.js，共需要修改一处地方

加上 process.env.NODE_ENV === ‘test’ 打包测试包和打包正式包的配置一样

修改前
在这里插入图片描述

修改后
在这里插入图片描述

6、打包

6.1 运行命令

// 打包正式包
npm run build
// 打包测试包
npm run test
// 同时打包正式包和测试包
npm run all

6.2 打包成功目录
在这里插入图片描述
以上内容参考文档：
https://blog.csdn.net/weixin_43868943/article/details/101533284
https://www.jianshu.com/p/5148973f0b96

7、警告

参考文档：https://blog.csdn.net/mawei7510/article/details/103510691

7.1 打包过程中发现一个警告

{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

在这里插入图片描述

7.2 解决

7.2.1 找到 /node_modules/vue-loader/lib/template-compiler/index.js

修改前

    // prettify render fn
    if (!isProduction) {
      code = prettier.format(code, { semi: false, parser: 'babylon' })
    }

修改后

    // prettify render fn
    if (!isProduction) {
      code = prettier.format(code, { semi: false, parser: 'babel' })
    }

7.3 再次运行成功

在这里插入图片描述
8、关闭ESLint代码校验

8.1 来到 /config/index.js

修改前

  dev: {
    useEslint: true,
  },

修改后

  dev: {
    useEslint: false, // 关闭格式校验
  },

8.2 注意：需要 npm start / npm run start 重新运行项目才能生效

9、配置测试版和正式版的基础url

9.1 在 /src/components 目录下新建全局变量global.vue文件

<script>
let baseUrl;
if (process.env.NODE_ENV === "production") {
  // 正式包环境
  baseUrl = "https://app...";
} else if (process.env.NODE_ENV === "test") {
  // 测试包环境
  baseUrl = "https://test-app...";
} else if (process.env.NODE_ENV === "development") {
  // 本地包环境
  baseUrl = "https://test-app...";
}
export default {
  url: baseUrl,
};
</script>

9.2 来到 /src/main.js 中引入全局变量并挂载到vue原型对象上

import global from './components/global' // 引入全局变量
Vue.prototype.global = global // 挂载到vue原型对象上

9.3 在需要打印的页面，打印输出

  created() {
    console.log(this.global.url)
  }

// 正式包环境
https://app...

// 测试包环境
https://test-app...

// 本地包环境
https://test-app...

10、引入axios

10.1 在cmd窗口中执行命令 npm install axios@0.18.1 --save
在这里插入图片描述
10.2 在 /package.json 文件中可以看到引入成功

10.3 来到 /src/main.js 中引入axios并挂载到vue原型对象上

11、成功请求接口

  created() {
    var _this = this;
    // 获取仓位层数
    _this.getFloorNum();
  },
  methods: {
    // 获取仓位层数
    async getFloorNum() {
      var _this = this;
      const { data: res } = await _this.$http({
        url: _this.global.url + "/Api/Dict/NoPos",
        method: "GET",
        params: {
          no_id: "583",
          type: 1,
        },
      });
      console.log(res);
    },
  },

12、本地项目自动打开浏览器

12.1 来到 /config/index.js

修改前

autoOpenBrowser: false,

修改后

autoOpenBrowser: true,  // 自动打开浏览器

13、正确配置背景图片的打包路径

参考文档：https://blog.csdn.net/qq_26422747/article/details/80599364

13.1 测试代码

<template>
  <div class="hello">
    <div class="box1"></div>
  </div>
</template>

<script>
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box1 {
  width: 400px;
  height: 400px;
  /* 背景图片使用绝对路径 */
  /* background: url("/src/assets/images/bg1.jpg"); */
  /* 背景图片使用相对路径 */
  background: url("../assets/images/bg1.jpg");
  background-size: cover;
  background-color: pink;
}
</style>

13.2 在 css 中使用背景图片时，需要使用相对路径

13.2.1 背景图片在本地文件中的位置

在这里插入图片描述

13.2.2 如果背景图片使用绝对路径，在开发环境中都无法显示

background: url("/src/assets/images/bg1.jpg");

在这里插入图片描述
13.2.3 如果背景图片使用相对路径，在开发环境中可以正常显示

background: url("../assets/images/bg1.jpg");

在这里插入图片描述
13.2.4 观察可以发现，在开发环境中，背景图片在css中的地址是绝对地址

background: url(/static/img/bg1.573a00d.jpg);

13.3 继续观察在测试包和正式包中，背景图片能否正常显示

13.3.1 在 cmd 窗口中运行 npm run all，打包测试包和正式包

13.3.2 首先可以看到，背景图片已被正确打包

在这里插入图片描述
13.3.3 打开 /test/index.html，可以看到图片无法显示

13.3.4 打开 /test/static/app.css，可以看到背景图片的地址是绝对地址，即是相对于服务器根目录的地址

.box1[data-v-35be6217]{
  width:400px;
  height:400px;
  background: url(static/img/bg1.573a00d.jpg);
  background-size:cover;background-color:pink
}

13.3.5 然而，还记得吗，之前我们在 /config/index.js 中，将静态资源 static 的打包路径修改为了./ ，即相对于当前路径，就是为了解决项目部署上线之后，test文件夹并不是开放性的放在服务器根目录的问题
在这里插入图片描述

13.3.6 项目部署上线之后，test测试包在服务器中的目录

并不是这样

服务器根目录
	index.html
	static
		css
		js
		img

而是这样

服务器根目录
	...
	dist
		index.html
		static
			css
			js
			img
	test
		index.html
		static
			css
			js
			img
	...

13.3.7 那么，同样的，background: url(static/img/bg1.573a00d.jpg)中，static/img/bg1.573a00d.jpg 这个地址也是相对于服务器根目录的地址，而项目部署上线之后，test文件夹并不是开放性的放在服务器根目录下的，所以在服务器根目录下找不到图片资源

13.4 解决方案，来到 /build/utils.js，修改一处地方

修改前

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
      })
    }

修改后

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' 
        // 添加publicPath配置项，由于背景图片会相对于css路径打包，而项目不是开放性的放在服务器根目录中，所以需要在背景图片路径前加../../，这样打包出来的路径由 static/img/bg1.573a00d.jpg 变为 ../../static/img/bg1.573a00d.jpg
      })
    }

13.4.1 运行 npm run all ，重新打包测试包和正式包

13.4.2 打开 /test/index.html，可以看到图片正常显示

在这里插入图片描述
打开 /test/static/app.css，可以看到背景图片的地址变为相对地址，即相对于当前app.css的地址

.box1[data-v-35be6217]{
  width:400px;
  height:400px;
  background:url(../../static/img/bg1.573a00d.jpg);
  background-size:cover;background-color:pink
}

13.5 背景图片不能使用行内样式

<template>
  <div class="hello">
    <div class="box2" style="width: 400px;height: 400px;background: url('../assets/images/bg2.jpg');background-size: cover;background-color: pink;"></div>
  </div>
</template>

如下图，行内样式中，背景图片的路径不能被正常转化为相对路径或绝对路径，是原样输出，打包时也不会打包该背景图片资源（bg2.jpg）
在这里插入图片描述

Upward Force

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Vue2.0项目根据线上环境分别打出测试包和生产包

1、来到package.json修改前修改后2、在 /build 目录下新增 test.js2.1 内容可以直接拷贝同目录下 build.js 的内容，但是需要修改三处地方2.2 修改前1、process.env.NODE_ENV = 'production'2、const webpackConfig = require('./webpack.prod.conf')3、const spinner = ora('building for production...')2.3、修改后
复制链接

扫一扫