vuecli4 启动_vue-cli4 全面配置(持续更新)

最新推荐文章于 2021-10-04 21:47:05 发布

weixin_39615991

最新推荐文章于 2021-10-04 21:47:05 发布

阅读量1k

点赞数

文章标签： vuecli4 启动

本文链接：https://blog.csdn.net/weixin_39615991/article/details/111732272

版权

https://github.com/staven630/vue-cli4-configgithub.com

vue-cli4 全面配置(持续更新)

细致全面的 vue-cli4 配置信息。涵盖了使用 vue-cli 开发过程中大部分配置需求。

不建议直接拉取此项目作为模板，希望能按照此教程按需配置，或者复制 vue.config.js 增删配置,并自行安装所需依赖。

vue-cli3 配置见 vue-cli3 分支。

其他系列

✅ 配置多环境变量

通过在 package.json 里的 scripts 配置项中添加--mode xxx 来选择不同环境

只有以 VUE_APP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，代码中可以通过 process.env.VUE_APP_BASE_API 访问

NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用

配置

在项目根目录中新建.env, .env.production, .env.analyz 等文件.env

serve 默认的本地开发环境配置

NODE_ENV = "development"

BASE_URL = "./"

VUE_APP_PUBLIC_PATH = "./"

VUE_APP_API = "https://test.staven630.com/api".env.production

build 默认的环境配置(正式服务器)

NODE_ENV = "production"

BASE_URL = "https://prod.staven630.com/"

VUE_APP_PUBLIC_PATH = "https://prod.oss.com/staven-blog"

VUE_APP_API = "https://prod.staven630.com/api"

ACCESS_KEY_ID = "xxxxxxxxxxxxx"

ACCESS_KEY_SECRET = "xxxxxxxxxxxxx"

REGION = "oss-cn-hangzhou"

BUCKET = "staven-prod"

PREFIX = "staven-blog".env.crm

自定义 build 环境配置(预发服务器)

NODE_ENV = "production"

BASE_URL = "https://crm.staven630.com/"

VUE_APP_PUBLIC_PATH = "https://crm.oss.com/staven-blog"

VUE_APP_API = "https://crm.staven630.com/api"

ACCESS_KEY_ID = "xxxxxxxxxxxxx"

ACCESS_KEY_SECRET = "xxxxxxxxxxxxx"

REGION = "oss-cn-hangzhou"

BUCKET = "staven-crm"

PREFIX = "staven-blog"

IS_ANALYZE = true;

修改 package.json

"scripts": {

"build": "vue-cli-service build",

"crm": "vue-cli-service build --mode crm"

}

使用环境变量

API: { { api }}

export default {

name: "home",

data() {

return {

api: process.env.VUE_APP_API

};

mounted() {

// js代码中使用环境变量

console.log("BASE_URL: ", process.env.BASE_URL);

console.log("VUE_APP_API: ", process.env.VUE_APP_API);

}

};

✅ 配置基础 vue.config.js

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);

module.exports = {

publicPath: IS_PROD ? process.env.VUE_APP_PUBLIC_PATH : "./", // 默认'/'，部署应用包时的基本 URL

// outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录

// assetsDir: "", // 相对于outputDir的静态资源(js、css、img、fonts)目录

lintOnSave: false,

runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本

productionSourceMap: !IS_PROD, // 生产环境的 source map

parallel: require("os").cpus().length > 1,

pwa: {}

};

✅ 配置 proxy 代理解决跨域问题

module.exports = {

devServer: {

// overlay: { // 让浏览器 overlay 同时显示警告和错误

// warnings: true,

// errors: true

// },

// open: false, // 是否打开浏览器

// host: "localhost",

// port: "8080", // 代理断就

// https: false,

// hotOnly: false, // 热更新

proxy: {

"/api": {

target:

"https://www.easy-mock.com/mock/5bc75b55dc36971c160cad1b/sheets", // 目标代理接口地址

secure: false,

changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端

// ws: true, // 是否启用websockets

pathRewrite: {

"^/api": "/"

}

};

访问

import axios from "axios";

export default {

mounted() {

axios.get("/api/1").then(res => {

console.log('proxy:', res);

});

}

};

✅ 修复 HMR(热更新)失效

如果热更新失效，如下操作：

module.exports = {

chainWebpack: config => {

// 修复HMR

config.resolve.symlinks(true);

}

};

✅ 修复 Lazy loading routes Error： Cyclic dependency https://github.com/vuejs/vue-cli/issues/1669

module.exports = {

chainWebpack: config => {

// 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中

config.plugin("html").tap(args => {

// 修复 Lazy loading routes Error

args[0].chunksSortMode = "none";

return args;

});

}

};

✅ 添加别名 alias

const path = require("path");

const resolve = dir => path.join(__dirname, dir);

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);

module.exports = {

chainWebpack: config => {

// 添加别名

config.resolve.alias

.set("vue$", "vue/dist/vue.esm.js")

.set("@", resolve("src"))

.set("@assets", resolve("src/assets"))

.set("@scss", resolve("src/assets/scss"))

.set("@components", resolve("src/components"))

.set("@plugins", resolve("src/plugins"))

.set("@views", resolve("src/views"))

.set("@router", resolve("src/router"))

.set("@store", resolve("src/store"))

.set("@layouts", resolve("src/layouts"))

.set("@static", resolve("src/static"));

}

};

✅ 压缩图片

npm i -D image-webpack-loader

在某些版本的 OSX 上安装可能会因缺少 libpng 依赖项而引发错误。可以通过安装最新版本的 libpng 来解决。

brew install libpng

module.exports = {

chainWebpack: config => {

if (IS_PROD) {

config.module

.rule("images")

.use("image-webpack-loader")

.loader("image-webpack-loader")

.options({

mozjpeg: { progressive: true, quality: 65 },

optipng: { enabled: false },

pngquant: { quality: [0.65, 0.9], speed: 4 },

gifsicle: { interlaced: false }

// webp: { quality: 75 }

});

}

};

✅ 自动生成雪碧图

默认 src/assets/icons 中存放需要生成雪碧图的 png 文件。首次运行 npm run serve/build 会生成雪碧图，并在跟目录生成 icons.json 文件。再次运行命令时，会对比 icons 目录内文件与 icons.json 的匹配关系，确定是否需要再次执行 webpack-spritesmith 插件。

npm i -D webpack-spritesmith

let has_sprite = true;

let files = [];

const icons = {};

try {

fs.statSync(resolve("./src/assets/icons"));

files = fs.readdirSync(resolve("./src/assets/icons"));

files.forEach(item => {

let filename = item.toLocaleLowerCase().replace(/_/g, "-");

icons[filename] = true;

});

} catch (error) {

fs.mkdirSync(resolve("./src/assets/icons"));

}

if (!files.length) {

has_sprite = false;

} else {

try {

let iconsObj = fs.readFileSync(resolve("./icons.json"), "utf8");

iconsObj = JSON.parse(iconsObj);

has_sprite = files.some(item => {

let filename = item.toLocaleLowerCase().replace(/_/g, "-");

return !iconsObj[filename];

});

if (has_sprite) {

fs.writeFileSync(resolve("./icons.json"), JSON.stringify(icons, null, 2));

}

} catch (error) {

fs.writeFileSync(resolve("./icons.json"), JSON.stringify(icons, null, 2));

has_sprite = true;

}

// 雪碧图样式处理模板

const SpritesmithTemplate = function(data) {

// pc

let icons = {};

let tpl = `.ico {

display: inline-block;

background-image: url(${data.sprites[0].image});

background-size: ${data.spritesheet.width}px ${data.spritesheet.height}px;

}`;

data.sprites.forEach(sprite => {

const name = "" + sprite.name.toLocaleLowerCase().replace(/_/g, "-");

icons[`${name}.png`] = true;

tpl = `${tpl}

.ico-${name}{

width: ${sprite.width}px;

height: ${sprite.height}px;

background-position: ${sprite.offset_x}px ${sprite.offset_y}px;

}

});

return tpl;

};

module.exports = {

configureWebpack: config => {

const plugins = [];

if (has_sprite) {

plugins.push(

new SpritesmithPlugin({

src: {

cwd: path.resolve(__dirname, "./src/assets/icons/"), // 图标根路径

glob: "**/*.png" // 匹配任意 png 图标

target: {

image: path.reso

最低0.47元/天解锁文章

weixin_39615991

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vuecli4 启动_vue-cli4 全面配置(持续更新)

https://github.com/staven630/vue-cli4-configgithub.comvue-cli4 全面配置(持续更新)细致全面的 vue-cli4 配置信息。涵盖了使用 vue-cli 开发过程中大部分配置需求。不建议直接拉取此项目作为模板，希望能按照此教程按需配置，或者复制 vue.config.js 增删配置,并自行安装所需依赖。vue-cli3 配置见 vue-...
复制链接

扫一扫