1. 程式人生 > >(vue2.0 案例3.0) 在vue-cli 專案中 需要知道常見的配置 防止入坑

(vue2.0 案例3.0) 在vue-cli 專案中 需要知道常見的配置 防止入坑

一、配置打包後的檔案路徑 

進入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: '/'
, redirect:{name:'Into'} } ] })
五、有些圖片引用失敗 在build\webpack.prod.conf.js 的限制limit註釋掉
{
  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
},