码迷,mamicode.com
首页 > 其他好文 > 详细

Vue3.0以上版本不同环境使用不同配置文件打包

时间:2020-04-29 14:54:25      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:资源   join   output   ant   turn   代理服务器   项目   overlay   localhost   

一、在项目跟目录下新增配置配置文件(如果存在则不需要新建):

1、文件 .env ,该文件配置的内容不论什么环境打包都会生效

* 公共配置信息,根据自己需求添加

 

2、文件 .env.dev ,开发环境配置文件,内容:

NODE_ENV=development
VUE_APP_URL=127.0.0.1:8081

 

3、文件 .env.prod ,生产环境配置文件,内容:

NODE_ENV=production
VUE_APP_URL=127.0.0.1:8082

 

二、package.json 文件曾加下面红色文字内容:

{
  "name": "vue-vant-ui",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:dev": "vue-cli-service build --mode dev",
    "build:prod": "vue-cli-service build --mode prod"
  },

 

至此,不同环境打包配置文件已经生效,对应打包命令:

npm run build:dev
npm run build:prod

打包命令红色部分对应 package.json 新增内容中的 key

 

三、其余地方如何使用配置文件中的配置,下面是vue.config.js中一些用到的地方,高亮显示,其余地方用法一致:

console.log(‘==================系统初始化,vue.config.js 配置文件开始加载==================‘);

const path = require(‘path‘);
function resolve (dir) {
    return path.join(__dirname, dir);
}

var targetUrl = ‘http://localhost:8080‘;
if (process.env.VUE_APP_URL != undefined && process.env.VUE_APP_URL != ‘‘) {
  targetUrl = process.env.VUE_APP_URL;
}
console.log(‘targetUrl:‘ + targetUrl);

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./", // 部署应用时的根路径(默认‘/‘),也可用相对路径(存在使用限制)
  outputDir: "dist", // 运行时生成的生产环境构建文件的目录(默认‘‘dist‘‘,构建之前会被清除)
  assetsDir: "static", //放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认‘‘)
  lintOnSave: true, // 是否开启eslint保存检测
  productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
  chainWebpack: (config) => {
      config.resolve.alias  // 为指定目录设置全局别名
        .set(‘@‘, resolve(‘src‘))
        .set(‘@public‘, resolve(‘public‘))
  },
  devServer: {
    /* 本地ip地址 */
    host: "localhost",
    port: "80",
    hot: true,
    /* 自动打开浏览器 */
    open: false,
    overlay: {
      warning: false,
      error: true
    }, // 错误、警告在页面弹出
    /* 跨域代理 */
    proxy: {
      "/api": {
        /* 目标代理服务器地址 */
        target: targetUrl , //
        /* 允许跨域 */
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      } //,
      // ‘/foo‘: {
      //   target: ‘<other_url>‘
      // }
    }
    // pluginOptions: {// 第三方插件配置
    //
    // }
  }
};

console.log(‘==================系统初始化,vue.config.js 配置文件加载结束==================‘);

 

Vue3.0以上版本不同环境使用不同配置文件打包

标签:资源   join   output   ant   turn   代理服务器   项目   overlay   localhost   

原文地址:https://www.cnblogs.com/zhousjcn/p/12801810.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!