首先在项目根目录下面创建一个vue.config.js文件,该文件的作用是配置打包方式以及一些项目配置
// 除了以上这些,我们最好还要将router下的index.js中的mode设置成hash,不要设置成history module.exports = { // 公共路径(必须有的) publicPath: "./", // 输出文件目录 outputDir: "dist", // 静态资源存放的文件夹(相对于ouputDir) // assetsDir: "assets", // eslint-loader 是否在保存的时候检查(果断不用,这玩意儿我都没装) lintOnSave: false, // 我用的only,打包后小些 // compiler: false, productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小,加速构建 // css相关配置(我暂时没用到) // css: { // 是否使用css分离插件 ExtractTextPlugin // extract: true, // 开启 CSS source maps? // sourceMap: false, // css预设器配置项 // loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. // modules: false // }, // webpack-dev-server 相关配置 devServer: { open: true, // npm run serve后自动打开页面 host: '0.0.0.0', // 匹配本机IP地址(默认是0.0.0.0) port: 8080, // 开发服务器运行端口号 proxy: null, // 注:目前本项目暂时没有写后台接口,没有跨域问题,暂时不配置proxy /* 使用代理 */ proxy: { '/api': { target: process.env.VUE_APP_BASE_API, //对应自己的接口 changeOrigin: true, //开启代理 在本地创建一个虚拟 服务器 发送请求的数据 同时接受请求的数据 这服务器端和服务器不会产生跨域 ws: true, pathRewrite: { '^/api': '' } }, '/zhou': { target: '', // 设置你调用的接口域名和端口号 ws: true, // 是否启用websockets changeOrigin: true, pathRewrite: { '^/zhou': '/' } } }, }, }只需要代理一次配置一个api代理即可 ,如果后端有多个域名接口,则需要配置多个api代理,在上面的代码段中,我采用了两个api代理,第一个‘/api’,第二个‘/zhou’,防止冲突,不建议你使用‘/apii’等与第一个api代理字段大致相同的字段
其他介绍 代码段中都有注释