vue 和ip 配置本地_vue项目配置localhost和IP地址访问

想要实现下图效果

修改\config\index文件的host为’0.0.0.0’

'use strict'

const path = require('path')

module.exports = {

dev: {

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {},

// host: require('ip').address(),

host: '0.0.0.0',

port: 8080,

autoOpenBrowser: false,

errorOverlay: true,

notifyOnErrors: true,

poll: false,

useEslint: true,

showEslintErrorsInOverlay: false,

devtool: 'cheap-module-eval-source-map',

cacheBusting: true,

cssSourceMap: true

},

devServer: {},

build: {

index: path.resolve(__dirname, '../dist/index.html'),

assetsRoot: path.resolve(__dirname, '../dist'),

assetsSubDirectory: 'static',

assetsPublicPath: '/',

productionSourceMap: true,

devtool: '#source-map',

productionGzip: false,

productionGzipExtensions: ['js', 'css'],

bundleAnalyzerReport: process.env.npm_config_report

}

}

这一步修改为了使localhost可以访问项目

修改\build\webpack.dev.conf.js的compilationSuccessInfo的messages属性

'use strict'

const utils = require('./utils')

const webpack = require('webpack')

const config = require('../config')

const merge = require('webpack-merge')

const path = require('path')

const baseWebpackConfig = require('./webpack.base.conf')

const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

const portfinder = require('portfinder')

const HOST = process.env.HOST

const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {

module: {

rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })

},

// cheap-module-eval-source-map is faster for development

devtool: config.dev.devtool,

// these devServer options should be customized in /config/index.js

devServer: {

clientLogLevel: 'warning',

historyApiFallback: {

rewrites: [

{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },

],

},

hot: true,

contentBase: false, // since we use CopyWebpackPlugin.

compress: true,

host: HOST || config.dev.host,

port: PORT || config.dev.port,

open: config.dev.autoOpenBrowser,

overlay: config.dev.errorOverlay

? { warnings: false, errors: true }

: false,

publicPath: config.dev.assetsPublicPath,

proxy: config.dev.proxyTable,

quiet: true, // necessary for FriendlyErrorsPlugin

watchOptions: {

poll: config.dev.poll,

}

},

plugins: [

new webpack.DefinePlugin({

'process.env': require('../config/dev.env')

}),

new webpack.HotModuleReplacementPlugin(),

new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.

new webpack.NoEmitOnErrorsPlugin(),

// https://github.com/ampedandwired/html-webpack-plugin

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true

}),

// copy custom static assets

new CopyWebpackPlugin([

{

from: path.resolve(__dirname, '../static'),

to: config.dev.assetsSubDirectory,

ignore: ['.*']

}

])

]

})

module.exports = new Promise((resolve, reject) => {

portfinder.basePort = process.env.PORT || config.dev.port

portfinder.getPort((err, port) => {

if (err) {

reject(err)

} else {

process.env.PORT = port

devWebpackConfig.devServer.port = port

devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({

compilationSuccessInfo: {

// 修改这里

messages: [

`App runing at: `,

`Local: http://localhost:${port}`,

`Network: http://${require('ip').address()}:${port}`,

],

},

onErrors: config.dev.notifyOnErrors

? utils.createNotifierCallback()

: undefined

}))

resolve(devWebpackConfig)

}

})

})

这一步修改终端提示内容