二、vue-cli3.0项目配置开发与运行环境

短命女 2023-06-09 15:22 21阅读 0赞

1、在项目跟目录下创建.env、.env.development、.env.production、vue.config.js四个文件，其中.env中的代码在所有环境下都执行，.env.development文件仅在开发环境下运行，.env.production仅在生产环境下运行，vue.config.js是配置文件

.env文件可以不写内容，有需要时再写

.env.development

VUE_APP_URL=http://localhost:4567
    outputDie=dev_dist

.env.production

VUE_APP_URL=192.168.1.155:4567
    outputDie=dist

vue.config.js

const path = require("path");
    
    module.exports = {
      publicPath: "/", // 公共路径
      outputDir: process.env.NODE_ENV === "development" ? "devdist" : "dist", // 不同的环境打不同包名
      css: { // 一次配置，全局使用，这个scss 因为每个文件都要引入
        loaderOptions: {
          sass: {
            // data: `@import "./src/assets/hotcss/px2rem.scss";`
          }
        }
      },
      lintOnSave: false, // 关闭eslint
      productionSourceMap: true, // 生产环境下css 分离文件
      devServer: { // 配置服务器
        port: 8086,
        open: false, // 配置自动启动浏览器
        https: false,
        overlay: {
          warnings: true,
          errors: true
        }
      },
      configureWebpack:{  // 覆盖webpack默认配置的都在这里
        resolve: {   // 配置解析别名
          alias: {
            "@": path.resolve(__dirname, "./src"),
          }
        }
      }
    }

其中VUE\_APP\_URL是访问后台的路径  outputDie是打包文件名

可以执行npm run build看一下打包情况，具体后台访问验证可根据下一篇文章起验证

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70]: /images/20230531/7b7f4a403474471c8a35c221a5bb4eb3.png