javascript - vue.config.js 为 Scss 输出定制
问题描述
我们的网站上有 3 个部分（站点、面板、管理员）。我们有一个npm run serve来运行所有这些。在本地，所有的事情都是真实的，但是当我们构建应用程序并将其上传到服务器时，所有的 CSS 都已经混合在一起，我们有网站管理员的 CSS！这是不正确的，并导致一些冲突。虽然我们为每个部分都有一个特定的 main.js 文件
module.exports = {
pages: {
index: {
// entry for the page
entry: './src/pages/site/main.js',
// the source template
template: 'public/index.html',
// output as dist/index.html
filename: 'index.html',
// when using title option,
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Site',
// chunks to include on this page, by default includes
// extracted common chunks and vendor chunks.
// chunks: ['chunk-vendors', 'chunk-common', 'index']
},
panel: {
// entry for the page
entry: './src/pages/panel/main.js',
// the source template
template: 'public/panel.html',
// output as dist/index.html
filename: 'panel.html',
// when using title option,
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Panel',
// chunks to include on this page, by default includes
// extracted common chunks and vendor chunks.
// chunks: ['chunk-vendors', 'chunk-common', 'index']
},
admin: {
// entry for the page
entry: './src/pages/admin/main.js',
// the source template
template: 'public/admin.html',
// output as dist/index.html
filename: 'admin.html',
// when using title option,
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Admin',
// chunks to include on this page, by default includes
// extracted common chunks and vendor chunks.
// chunks: ['chunk-vendors', 'chunk-common', 'index']
},
},
publicPath: '/',
// filenameHashing: false,
productionSourceMap: false,
devServer: {
historyApiFallback: {
rewrites: [
{ from: /\/index/, to: '/index.html' },
{ from: /\/panel/, to: '/panel.html' },
{ from: /\/admin/, to: '/admin.html' },
]
},
proxy: {
"/api": {
target: process.env.VUE_APP_BASE_URL,
secure: false
}
}
},
chainWebpack: (config) => {
// Disable prefetching and preloading
config.plugins.delete('prefetch')
config.plugins.delete('preload')
},
};
我们如何为每个部分分离构建的 CSS 文件？
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<title>Panel</title>
<link href="/css/about-business.1adb9165.css" rel="prefetch">
<link href="/css/about.73fc879d.css" rel="prefetch">
<link href="/css/access.d45b97d4.css" rel="prefetch">
<link href="/css/contact-information~forget-password-legal-person~forget-password-real-person~product-add~product-edi~f452fa4c.ac5b10c9.css" rel="prefetch">
<link href="/css/contact-information~profile-edit~profile-read.f32eaac2.css" rel="prefetch">
<link href="/css/general-information~news~product-add~product-edit~service-category~service-edit.2f409942.css" rel="prefetch">
<link href="/css/header.92a2e076.css" rel="prefetch">
<link href="/css/news.90c70f1f.css" rel="prefetch">
<link href="/css/product-category.7ad75cc0.css" rel="prefetch">
<link href="/css/product-list~service-list.82470a85.css" rel="prefetch">
<link href="/css/product.beff60b8.css" rel="prefetch">
<link href="/css/service-category.7ad75cc0.css" rel="prefetch">
<link href="/css/service.9c8cc67f.css" rel="prefetch">
<link href="/css/settings.9a0e7b5f.css" rel="prefetch">
<link href="/css/sidebar.f82873cf.css" rel="prefetch">
<link href="/css/staff.d45b97d4.css" rel="prefetch">
<link href="/css/tabs.a5e2ea1f.css" rel="prefetch">
<link href="/js/about-business.dbc6143b.js" rel="prefetch">
<link href="/js/about-business~news.51818b1c.js" rel="prefetch">
<link href="/js/about.db809ccd.js" rel="prefetch">
<link href="/js/access.fbb407ea.js" rel="prefetch">
<link href="/js/contact-information.bdc70415.js" rel="prefetch">
<link href="/js/contact-information~forget-password-legal-person~forget-password-real-person~product-add~product-edi~f452fa4c.8ad7e572.js" rel="prefetch">
<link href="/js/contact-information~profile-edit~profile-read.949affa3.js" rel="prefetch">
<link href="/js/general-information.046d0db7.js" rel="prefetch">
<link href="/js/general-information~news~product-add~product-edit~service-category~service-edit.9d3115d3.js" rel="prefetch">
<link href="/js/header.b7d4c54d.js" rel="prefetch">
<link href="/js/news.8abff08d.js" rel="prefetch">
<link href="/js/product-add.8f1a8226.js" rel="prefetch">
<link href="/js/product-category.31b2f1cb.js" rel="prefetch">
<link href="/js/product-edit.907e4fe4.js" rel="prefetch">
<link href="/js/product-list.993ba1c4.js" rel="prefetch">
<link href="/js/product-list~service-list.3e36c653.js" rel="prefetch">
<link href="/js/product.17e66daa.js" rel="prefetch">
<link href="/js/profile.a8c3a128.js" rel="prefetch">
<link href="/js/service-category.4921c7e1.js" rel="prefetch">
<link href="/js/service-edit.0bc0b14e.js" rel="prefetch">
<link href="/js/service-list.5368455a.js" rel="prefetch">
<link href="/js/service.6878ccaa.js" rel="prefetch">
<link href="/js/settings.3ddd4c12.js" rel="prefetch">
<link href="/js/sidebar.de6a6df2.js" rel="prefetch">
<link href="/js/socials.d928ee1c.js" rel="prefetch">
<link href="/js/staff.d213b07e.js" rel="prefetch">
<link href="/js/tabs.37c57b96.js" rel="prefetch">
<link href="/js/tags.c31aa379.js" rel="prefetch">
<link href="/css/chunk-common.0d04c0dc.css" rel="preload" as="style">
<link href="/css/chunk-vendors.a6f32033.css" rel="preload" as="style">
<link href="/css/panel.0838e8c0.css" rel="preload" as="style">
<link href="/js/chunk-common.988f3453.js" rel="preload" as="script">
<link href="/js/chunk-vendors.f44e7ec2.js" rel="preload" as="script">
<link href="/js/panel.6ef426ad.js" rel="preload" as="script">
<link href="/css/chunk-vendors.a6f32033.css" rel="stylesheet">
<link href="/css/chunk-common.0d04c0dc.css" rel="stylesheet">
<link href="/css/panel.0838e8c0.css" rel="stylesheet">
</head>
<body>
<noscript><strong>We're sorry but Panel doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id="app"></div>
<script src="/js/chunk-vendors.f44e7ec2.js"></script>
<script src="/js/chunk-common.988f3453.js"></script>
<script src="/js/panel.6ef426ad.js"></script>
</body>
</html>
解决方案
推荐阅读
- php - PHP 正则表达式匹配并在每个匹配中包含组（完全匹配）
- sql - 生成序列号
- sql - SQL/Postgresql：根据表中的所有列查找重复项
- octave - 评估参数列表元素编号 1
- python-3.x - 请让我知道我在这个 python 代码中做错了什么？
- flutter - 上传图像颤动时如何显示小部件（加载 20%、30%）
- jquery - 如何使用 jQuery 在按钮中放置图像或图标
- chart.js - 如何在 Chart.js 中向 x 轴刻度值添加一些水平填充？
- react-native - 如何修复反应本机console.log内存泄漏
- r - 通过组合因素从数据框创建子集