Vue.js / Webpack 使用 CSS 和 JS 的"静态"子域构建 "index.html"

Question

我有一个 Vue.js 项目，在本地主机中运行良好。

但是，当我构建并部署到生产环境时，我需要在"静态"子域上提供静态文件(.css和.js(。

例如，我的主要网址：

https://www.example.com/index.html

静态资产将是：

https://static.example.com/css/app.50f83e17.css
https://static.example.com/js/chunk-vendors.6f495bf3.js

当我运行"npm run build"时，Webpack build加载"index.html"文件，如下所示：

<link href=/css/app.50f83e17.css rel=stylesheet>

但是我需要 href 是这样的：

<link href=https://static.example.com/css/app.50f83e17.css rel=stylesheet>

如何配置 Vue.js 或 Webpack 以使用 CSS 和 JS 的不同子域构建"索引.html"？

Answer 1

要实现这一点，你需要使用webpack publicPath

您可以配置 webpack 以构建索引.html使用不同的子域，

webpack.config.js

import webpack from 'webpack';
export default {
output: {
..
publicPath: 'https://static.example.com/js/',
},
};

npm 运行构建 Webpack 构建"index.html"将具有

..
..
<script type="text/javascript" src="https://static.example.com/js/chunk-vendors.6f495bf3.js"></script>

对于 css，

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: 'https://static.example.com/css/',
},
},
'css-loader',
],
},
],
},
};

您还可以在运行时指定 publicPath，

条目.js

__webpack_public_path__ = myRuntimePublicPath;
// rest of your application entry

注意：请考虑添加环境变量而不是硬编码资产 CDN 路径，并通过 npm 脚本传递环境变量，或者也可以定义全局 publicPath

var myRuntimePublicPath = 'https://static.example.com/js/'

并在条目文件(例如条目.js(中使用它，如上所示。

参考： webpack publicPath 和 mini-css-extract-plugin publicPath

在使用 Vue 路由器的情况下

你的应用程序捆绑包将部署在 publicPath 上的基本 URL(在 Vue CLI 3.3 之前称为 baseUrl(。

vue.config.js

module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? 'https://static.example.com/js/'
: '/'
}

Vue 路由器

将基重写为硬编码的默认值，因为它从 publicPath 获取值

base: '/'

这将允许 vuejs 构建的 javaScript 捆绑包的子域。