vue cli3 热更新 保存时自动刷新页面内容 + 分离环境变量.env package.json配置

二次信任 提交于 2020-04-14 01:47:50

【今日推荐】:为什么一到面试就懵逼!>>>

前几天ts+vue3.0+view-design撸了一个项目,然后总感觉哪里不对劲,今天终于醒悟了原来是热更新没开

在vue.config.js中配置以下选项

const IS_PRO = ['production', 'test'].includes(process.env.NODE_ENV);
css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: IS_PRO,
        // 开启 CSS source maps  打包时不生成.map文件?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
        },
        // 为所有的 CSS 及其预处理文件开启 CSS Modules。
        // 这个选项不会影响 `*.vue` 文件。
        requireModuleExtension: true
    },

上文中用到了process.env环境变量,那么这里在安利一个知识点吧
package.json

 "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "build:dev": "vue-cli-service build --mode development",
        "lint": "vue-cli-service lint"
    },

环境变量存放地址
在这里插入图片描述

优先级.env<.env.any<.env.any.local (.local文件会被 git 忽略)

npm run serve 会默认找到.env.development文件配置
npm run build会默认找到.env.production文件配置

当然我们可以把本地的配置放置在.local内用于本地配置,然后对应的线上和测试环境放置不同的文件,打包上线时 对应的 npm run build --文件名称就行了比如npm run build --development

vue-cli环境变量地址

发布了89 篇原创文章 · 获赞 103 · 访问量 13万+
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!