vuecli3 搭建的项目,实现前端下载固定文件

前言:在vue中引入的文件,打包之后,总是会报这里文件找不到

1.在项目根目录新建statis文件夹,放入固定文件
2.webpack拷贝插件 copy-webpack-plugin
安装:

npm install --save-dev copy-webpack-plugin

作用:在webpack中拷贝文件和文件夹:

from  定义要拷贝的源文件              from:__dirname+'/src/components'
to      定义要拷贝到的目标文件夹      to: __dirname+'/dist'
toType  file 或者 dir                可选,默认是文件
force   强制覆盖前面的插件            可选,默认是文件
context                              可选,默认base   context可用specific  context
flatten  只拷贝指定的文件             可以用模糊匹配
ignore  忽略拷贝指定的文件            可以模糊匹配

用法:

import CopyWebpackPlugin=require('copy-webpack-plugin');
new CopyWebpackPlugin([
    {
        from: __dirname+'/src/components',
        to: __dirname+'/dist',
        ignore: ['.*']
    }
])

3.实际配置:新建vue.config.js文件

//vuecli2--webpack.prod.conf.js文件里:
// 把静态资源拷贝到 dist下面去, 解决之前打包之后,index.html里面引入的静态资源找不到的问题
new CopyWebpackPlugin([{
    from: path.resolve(__dirname, '../'src/static)  // 一次性把static 里面的所有文件全部拷贝过来
	   /* 如果static存在多个文件,就不需要把 static里面的文件一一写出来
	  {
          from: path.resolve(__dirname, '../src/static/images'),
          to: path.resolve(__dirname, '../dist/static/images')
      },
      {
          from: path.resolve(__dirname, '../src/static/icons'),
          to: path.resolve(__dirname, '../dist/static/icons')
      },
      */
}]);
vuecli3--vue-config.js文件里:
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js'
      }
    },
    plugins:[
    	new CopyWebpackPlugin([{
    		from: './static',
            to:'./static' ,
    	}])
    ]
  },
 
}

你可能感兴趣的:(vue)