Vue-cli2.0创建新的项目并打包编译你需要知道的23事情

最新推荐文章于 2024-07-02 20:48:56 发布

a393007511

最新推荐文章于 2024-07-02 20:48:56 发布

阅读量352

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/a393007511/article/details/105965777

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

Vue-cli2.0创建新的项目并打包编译你需要知道的23事情

开发时配置请求地址转发

修改config\index.js 的proxyTable: {}

proxyTable: {
      '/tfdsanalysis': {// 识别的关键字
        target: 'http://192.168.13.10:8081/tfdsanalysis/', //转发后的路径
        changeOrigin: true,
        pathRewrite: {
          '^/tfdsanalysis': ''
        },
        logLevel: 'debug'
      },
      '/imagejz': {
        target: 'http://192.168.13.69:8081/imagejz',
        changeOrigin: true,
        pathRewrite: {
            '^/imagejz': ''
        },
        logLevel: 'debug'
      }
    },

图片不能加载

静态图片不能加载如背景图片在css中引用的

修改config\index.js，在下面代码里的 assetsPublicPath=’/'加上一点，变成如下


  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',//加.

修改build\utils.js 添加 publicPath: ‘…/…/’

// generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' //新增
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

图片路径时动态的打包不能加载

如

   <img :src="logUrl" />

方法一: logUr 应该使用require导入图片资源

data() {
    return {
      logUrl:require("../../static/logo.png"),

方法二 logUr 使用绝对路径

   <img :src="http://...../logo.png" />

方法三使用Import

import logUrj from '@/assets/images/icon/file/jpg.png'
export default {
  data:function(){
    return {
      logUrl: logUrlj
    }
  }
}

造成这个情况的原因是Webpack在打包时，默认静态图片会被打包成base64编码格式，导致打包生成的路径与图片名（带hash值）和开发时放置的位置与名称并不一致。

兼容浏览 es6的支持

安装 npm install babel-polyfil -S

//在main.js中添加
import "babel-polyfill";

建立一个commonJs 在里面定义参数想全局引用

在static 文件新建一个xxx.js

//ip配置参数
const IPCONFIG = 'http://192.168.13.69:8081/';
const threshold=6;
// module.exports={IPCONFIG,threshold} 只在谷歌中可用
//兼容ie
if ( typeof module === "object" && module && typeof module.exports === "object" ) {
    module.exports = {IPCONFIG:IPCONFIG,threshold:threshold};//不严格按照kv模式 IE中报错 缺：
} 

if ( typeof window === "object" && typeof window.document === "object" ) {
    window.IPCONFIG =IPCONFIG;
    window.threshold=threshold;
}

在index.html中导入

<link type="image/x-icon" href="./favicon.ico" rel="external nofollow shortcut icon"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="./static/xxx.js"></script>

在.vue文件使用；直接使用不要导入不要import 否则打包之后修改无效
```
window.location.href=IPCONFIG+"/xxx/excelExp.action?;
```
在.js 文件中使用；直接使用不要导入不要import 否则打包之后修改无效
```
 axios.defaults.baseURL=IPCONFIG;//重点 用配置文件中url 填充
```