h5-webgl-program/vue.config.js

const {
	defineConfig
} = require('@vue/cli-service')
module.exports = {
	transpileDependencies: true,
	runtimeCompiler: true, //是否使用包含运行时编译器的 Vue 构建版本。 
	lintOnSave: true, //是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
	productionSourceMap: false, //如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
	// 注意，一旦开启则意味着启动同源策略检查，浏览器会启动CORS
	// crossorigin: 'anonymous', //设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
	publicPath: process.env.NODE_ENV !== 'development' ? './' : '/', //打包发布时的目录
	outputDir: 'webgl', //生产环境构建文件的目录-打包时才有意义
	assetsDir: 'static', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。-打包时才有意义
	indexPath: 'index.html', //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。-打包时才有意义
	devServer: {
		open: true,
		proxy: {
		    '/api': {
		        target: "https://api.replicate.com/v1/", // 代理地址，这里设置的地址会代替axios中设置的baseURL
		        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
		        pathRewrite: {
		            '^/api': ''
		        }
		    },
		}
	},
	chainWebpack: config => {
		config.plugin('html')
			.tap(args => {
				args[0].title = "";//定义 HTML 文档的标题
				args[0].template = 'public/index.html';// webpack模板的地址-相对或绝对路径
				return args
			}).end();
		config.module
			.rule('scss')
			.test(/\.scss$/)
			.oneOf('vue')
			.use('px2rem-loader')
			.loader('px2rem-loader')
			.before('postcss-loader') // this makes it work.
			.options({
				remUnit: 75, //根据视觉稿，rem为px的⼗分之⼀，750px  75rem
				remPrecision: 4 //保留8位⼩数
			}).end();
		config.module
		    .rule('xml')
		    .test(/\.xml$/)
		    .use('file-loader')
		    .loader('file-loader')
			.options({
				esModule: false
			})
		    .end()
		config.module
		    .rule('swf')
		    .test(/\.swf/)
		    .use('file-loader')
		    .loader('file-loader')
			.options({
				esModule: false
			})
		    .end()
	}
}