Preface
I have used Vue as a management system and WebApp to do three or four projects. During this period, I encountered many pitfalls. I will list them one by one and give solutions to make it easier to use in the future and provide some solutions for others.
Problem appearance and solutions
1. Relative and absolute paths such as js and css after compilation.
config/document
build: {
env: require('./'),
index: (__dirname, '../dist/'),
assetsRoot: (__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', // "./" means the relative path Compilation result <link href=./static/css/app. rel=stylesheet> productionSourceMap: true,
// 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: .npm_config_report
},
2. After the relative path of the image in CSS is compiled, the path is incorrect.
//The same path is represented as ./static/img/static/img/*.jpg (defined as imgurl)Solution Revisebuild/
//Replace the corresponding codeif () {
return ({
use: loaders,
publicPath: '../../', //Note: This is automatically changed according to the path, (imgurl='static/img/*.jpg') fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
3. Use a proxy to resolve cross-domain requests.
vue-cli has integrated the http-proxy-middleware plugin
github：/chimurai/http-proxy-middleware
proxyTable: {
'/dianmi_service': {
target: 'https://****.',
changeOrigin: true
},
'/brand_service': {
target: 'https://*****.',
changeOrigin: true
}
},
The value of the target must not contain the project name, otherwise the server session problem may occur.
4. Use Vue as a page and use phonegap to compile Android APP, compatibility issues.
Cordova android 4.0 default webViews below do not support ES6, which will cause some column problems.
Fortunately, cordova android allows us to customize our own webView engine. Then we think of Tencent browsing service X5 core.
However, some great masters wrote cordova plugin based on this kernel
githup:/offbye/cordova-plugin-x5engine-webview
Use this plugin to solve it well. Lower versions of Android do not support Vue.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.