在进行为了方便进行内外网访问,需做以下相关配置 1、vue.config.js配置如下:
const webpack = require('webpack') // const path = require('path') // function resolve(dir) { // return path.join(__dirname, '..'1, dir) // } module.exports = { lintOnSave: false, publicPath: './', // 部署项目路径 devServer: { port: 8088, // 端口号 open: false, //配置自动启动浏览器 proxy: { '/项目名称': { target: '你的项目服务器内网地址:端口/项目名称',//内网 /*target: '你的项目服务器外网地址:端口/项目名称',//外网*/ /*target: '你的项目本地联调地址:端口号/', // 本地测试*/ changeOrigin: true, pathRewrite: { '^/项目名称': '/' } } } }, configureWebpack: { // webpack 配置项 根据需求 按需配置即可 plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'windows.jQuery': 'jquery' }) ] }, css: { loaderOptions: { sass: { prependData: `@import "@/assets/css/global.scss";` }, } } }2、根据需求配置store/index.js:
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { /*定义组件间通信变量*/ dayEvents:[], dayTaskShow:false, }, mutations: {}, actions: {}, modules: {} });3、main.js里面引入store:
import store from "./store";接下来就可以进行内外网访问了,实现前后端接口调用可以省略公共部分进行调用访问。