仿vue cli3 img打包路径引入问题 含ssr后台动态更改文件路径 问题
怎样将包的路径一起打包inde.html文件夹中
显示如下效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<link href="css/my.7602331c.css" rel="prefetch" />
<link href="js/activity.b0febba8.js" rel="prefetch" />
<link href="js/activity~backCommission~backwater~depositRecord~index~moneyWater~my~order.c0965db1.js" rel="prefetch" />
<link href="js/activity~index.28f2e986.js" rel="prefetch" />
<link href="js/auditQuery.d6276e83.js" rel="prefetch" />
<link href="js/backCommission.109d1543.js" rel="prefetch" />
<link href="js/backCommissionRatio.99dcde4c.js" rel="prefetch" />
<link href="js/backwater.e990536c.js" rel="prefetch" />
<link href="js/chunk-2954d6d9.c377ecf1.js" rel="prefetch" />
<link href="js/chunk-3cfc94f9.a70c056a.js" rel="prefetch" />
<link href="js/chunk-6ca571ea.2cb17b39.js" rel="prefetch" />
<link href="js/companyAlipay.2079c000.js" rel="prefetch" />
<link href="js/companyAlipay~companyEBank~my.88c0042c.js" rel="prefetch" />
<link href="js/companyEBank.f20a9e34.js" rel="prefetch" />
<link href="js/depositRecord.a396d631.js" rel="prefetch" />
<link href="js/deposits.2216ffff.js" rel="prefetch" />
<link href="js/index.c9e2b305.js" rel="prefetch" />
<link href="js/index~payResult~paySuccess~withdraw~withdrawSuccess.58c2dd09.js" rel="prefetch" />
<link href="js/moneyWater.4edab6b9.js" rel="prefetch" />
<link href="js/my.41c3a83e.js" rel="prefetch" />
<link href="js/onlineAlipay.c0aff5aa.js" rel="prefetch" />
<link href="js/onlineEBank.39cc6145.js" rel="prefetch" />
<link href="js/order.cf822a40.js" rel="prefetch" />
<link href="js/payResult.8f5e2bbc.js" rel="prefetch" />
<link href="js/payResult~paySuccess~withdrawSuccess.f44ff3c1.js" rel="prefetch" />
<link href="js/paySuccess.3296c288.js" rel="prefetch" />
<link href="js/paySuccess~withdrawSuccess.b91c1d8b.js" rel="prefetch" />
<link href="js/purse.a91ae339.js" rel="prefetch" />
<link href="js/purseDeposit.cac3cf39.js" rel="prefetch" />
<link href="js/timeCard.a3fe06e1.js" rel="prefetch" />
<link href="js/transfer.47126d89.js" rel="prefetch" />
<link href="js/withdraw.1a10825a.js" rel="prefetch" />
<link href="js/withdrawAudit.ff9a811d.js" rel="prefetch" />
<link href="js/withdrawSuccess.6cef1685.js" rel="prefetch" />
<link href="css/chunk-vendors.7cedee61.css" rel="preload" as="style" />
<link href="js/app.5f4db7e4.js" rel="preload" as="script" />
<link href="js/chunk-vendors.9dd4ab10.js" rel="preload" as="script" />
<link href="css/chunk-vendors.7cedee61.css" rel="stylesheet" />
</head>
<body>
<noscript>
<strong>We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="js/chunk-vendors.9dd4ab10.js"></script>
<script src="js/app.5f4db7e4.js"></script>
</body>
</html>打包配置
"use strict";
const path = require("path");
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const AddAssetHtmlWebpackPlugin = require("add-asset-html-webpack-plugin");
const webpack = require("webpack");
const utils = require("./utils");
const plugins = [
new HtmlWebpackPlugin({
filename: "index.html",
template: "index.html",
// inject: true,
// chunksSortMode: "none"
}),
new CleanWebpackPlugin(["dist"], {
root: path.resolve(__dirname, "../")
}),
new VueLoaderPlugin(),
new CopyWebpackPlugin([
{
from: utils.resolve("static/img"),
to: utils.resolve("dist/static/img"),
toType: "dir"
}
])
];
const files = fs.readdirSync(path.resolve(__dirname, "../dll"));
files.forEach(file => {
if (/.*\.dll.js/.test(file)) {
plugins.push(
new AddAssetHtmlWebpackPlugin({
filepath: path.resolve(__dirname, "../dll", file)
})
);
}
if (/.*\.manifest.json/.test(file)) {
plugins.push(
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, "../dll", file)
})
);
}
});
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/index.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/'
},
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
vue$: "vue/dist/vue.esm.js",
"@": utils.resolve("src"),
common: utils.resolve(__dirname, "/src/common"),
base: utils.resolve("src/base"),
assets: utils.resolve("assets"),
views: utils.resolve("src/views"),
static: utils.resolve("static"),
components: utils.resolve("src/components")
}
},
module: {
rules: [
// {
// test: /\.(js|vue)$/,
// use: 'eslint-loader',
// enforce: 'pre'
// },
{
test: /\.vue$/,
use: "vue-loader"
},
{
test: /\.js$/,
// exclude: path.resolve(__dirname, '/node_modules'),
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
//预设
presets: ["@babel/preset-env"],
//插件
plugins: ["@babel/plugin-syntax-dynamic-import"]
},
},
},
// {
// test: /\.(sa|sc)ss$/,
// use: [
// {
// loader: "sass-loader",
// options: {
// data: `@import "@nutui/nutui/dist/styles/index.scss";@import "@/components/scss/skin.scss";@import "@/components/scss/common.scss"; `
// }
// }
// ]
// },
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: "url-loader",
options: {
limit: 10000,
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: {
loader: "url-loader",
options: {
limit: 10000,
name: utils.assetsPath("media/[name].[hash:7].[ext]")
}
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: "url-loader",
options: {
limit: 10000,
name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
}
}
}
]
},
plugins
};
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
已解决\
目前只有一种方案，就是
git： https://github.com/webfrontup...