Vue-cli项目里配置内网外访问

it2023-08-17  84

Vue-cli项目里配置内网外访问

在进行为了方便进行内外网访问,需做以下相关配置 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";

接下来就可以进行内外网访问了,实现前后端接口调用可以省略公共部分进行调用访问。

最新回复(0)