vue打包部署到后端服务器

vue 打包部署到后端服务器

1.命令行 npm run build
 生成 dist文件夹，点击打开index.html文件会发现页面空白，打开控制台很多资源路径访问不到报错：
 Failed to load resource: net::ERR_FILE_NOT_FOUN
 bg.6257696.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
 element-icons.535877f.woff:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
 element-icons.732389d.ttf:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
 
2.解决办法
（1）在config文件夹下index.js里面找到build修改
 build: {
	   将assetsPublicPath: '/',改为assetsPublicPath: './',
	}
（2）解决element-ui图标字体样式访问不到。在build文件夹下找到util.js在如下处新增publicPath:'../../'
   if (options.extract) {
			return ExtractTextPlugin.extract({
				use: loaders,
				fallback: 'vue-style-loader',
				publicPath: '../../'
			})
		} else {
			return ['vue-style-loader'].concat(loaders)
		}
（3）在build文件夹下的webpack.prod.conf.js中找到output添加publicPath: '../../'
    output: {
        publicPath: '../../',
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
3.在重新生成打包文件就可以了