vue項(xiàng)目中配置問題
通過webpack之externals配置引入外部插件粪糙，減少打包vendor體積
1.在index.html里引入vue.min.js,vuex.min.js等等
<script type="text/javascript" src="./static/vendor/js/vue.min.js"></script>
<script type="text/javascript" src="./static/vendor/js/vuex.min.js"></script>
2.在build/webpack.base.conf.js下
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
// 這里需要將vue和vue-router公開出去驳糯，供全局使用
//這里小寫的(即冒號(hào)左邊的)vue和vue-router是我們引入資源時(shí)對(duì)應(yīng)的名字，
//冒號(hào)右面的是由庫的主人暴露出來的全局方法名
externals: {
'vue': 'Vue',
"element-ui": "ELEMENT",
"vue-router": "VueRouter",
"vuex": "Vuex",
"qs": "qs",
"axios": "axios",
"jquery": "$",
},
output: {}
// 其他...
}
webpack 配置局域網(wǎng)ip地址
config/index.js
module.exports = {
dev: {
// Paths
......
// 配置代理解決跨域
proxyTable: {
'/api': {
target: 'http://xx.com.cn/',
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': ''
}
}
},
// 配置局本地ip地址
host: '0.0.0.0', // 設(shè)置為0.0.0.0就可以訪問本地ip地址了
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
.....
},
build: {}
}
配置代理解決跨域
1.在config/index.js
module.exports = {
dev: {
// Paths
......
// 配置代理解決跨域
proxyTable: {
'/api': {
target: 'http://xx.com.cn/',
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': ''
}
}
},
// 配置局本地ip地址
host: '0.0.0.0', // 設(shè)置為0.0.0.0就可以訪問本地ip地址了
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
.....
},
build: {}
}
2.在src/main.js
Vue.config.productionTip = false
// 打包替換本地代理
Vue.prototype.api = process.env.NODE_ENV === 'production' ? '' : '/api';
// vue loading全局組件
Vue.component('loading', {
template: '<div class="zh-loading2" style="display: block;"><ul><li></li><li></li><li></li><li></li></ul><p>正在加載...</p></div>'
});
new Vue({
el: '#app',
render: h => h(App),
router,
components: { App },
template: '<App/>',
store
})
解決調(diào)用后端接口時(shí)版姑，需要先登錄的問題
如同：
在src/main.js中
export default {
name: 'App',
components: {
},
data() {
return {
}
},
computed: {
...mapState(['runwayNum'])
},
methods: {
},
created() {
// 在開發(fā)環(huán)境
if(process.env.NODE_ENV === 'development') {
// 設(shè)置接口cookie為接口地址已登錄的cookid
document.cookie = 'ci_session=xxxxxx';
}
},
mounted() {
}
}
一個(gè)模塊里，不要有index.vue和index.js爸吮，因?yàn)閕ndex.js的優(yōu)先級(jí)最高
webpack打包路徑修改
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths 路徑修改
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static/release_sort',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
react項(xiàng)目中配置問題
1.配置代理解決跨域
修改script/start.js文件
image.png
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler({
.....
});
// Load proxy config 修改proxy配置
const proxySetting = require(paths.appPackageJson).proxy;
let proxyConfig = prepareProxy(proxySetting, paths.appPublic);
proxyConfig = {
'/api/**': { // 匹配訪問地址中包含api的所宰，如果http://baidu.com/api/page
target: 'http://....com.cn/', //要跨域訪問的地址
changeOrigin: true,
},
}
// Serve webpack assets generated by the compiler over a web server.
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
