(vue2.0 案例3.0) 在vue-cli 專案中 需要知道常見的配置 防止入坑
阿新 • • 發佈:2018-12-30
一、配置打包後的檔案路徑
進入config>index.js把assetsPublicPath:'/'改成'./';
build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', productionSourceMap: false, productionGzip: false, productionGzipExtensions: ['js', 'css'] bundleAnalyzerReport: process.env.npm_config_report },
二、修改埠號8080為8888,防止埠衝突
進入config>index.js把修改port:8888 防止和其他埠衝突
dev: { env: require('./dev.env'), port: 8888,三、配置proxyTable 解決開發環境中的跨域問題
proxyTable: { '/aaa':{ target:'http://www.api.com/aaa', changeOrigin:true, pathRewrite:{ '^/aaa':'' } } },
然後介面是這樣子寫的
this.$http.get('/aaa/menu/get_list').then(function(data){ console.log(data) })
四、打包要去掉mode:’history‘,否則打包不成功
export default new Router({ // mode: 'history',//打包專案要把mode: history註釋掉 routes: [ { path: '/'五、有些圖片引用失敗 在build\webpack.prod.conf.js 的限制limit註釋掉, redirect:{name:'Into'} } ] })
{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { // limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } },
六、去掉打包後不要的.map檔案 在config\index.js 中把productionSourceMap:true改成
productionSourceMap:false
build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', productionSourceMap: false, productionGzip: false, productionGzipExtensions: ['js', 'css'] bundleAnalyzerReport: process.env.npm_config_report },