版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_15253407/article/details/89491255
// Vuecli 3.0 项目自定义添加静态目录，支持在index.html引入
// 在VueCli3.0 以脚手架创建的项目中，public 中的文件不会被webpack进行打包，在npm run build 之后全部都会copy到 dist中
一、在src的同级别目录添加static(vuecli2.0) (mkdir static/js/config.js)
二、vue.config.js 添加配置信息
// webpack的配置在这个属性里修改configureWebpack
const CopyWebpackPlugin = require('copy-webpack-plugin'); // npm install --save-dev copy-webpack-plugin
configureWebpack: config => {
if (process.env.NODE_ENV === 'development') {
config.devtool = 'source-map'
// mutate config for production...
}
config.plugins.push(
new CopyWebpackPlugin([
{
from: './static', // 新增可以被index.html访问的静态文件目录,支持多个
to: this.outputDir,
ignore: ['.*']
}
])
)
}
三、在public/index.html引入static中的文件
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--在index.html中引入static中的文件-->
<script src="<%= BASE_URL %>js/config.js"></script>
</head>