Vue+webpack vue-cli2 项目创建与打包

项目创建 vue-cli2

// 全局安装vue-cli
npm install vue-cli -g

// 创建一个基于 webpack 模板的新项目: vue init webpack 项目名
vue init webpack xxx

// 启动项目
npm run dev

vue-cli3 创建项目

vue create hello-world

vue-cli2 项目目录

• build 文件夹：webpack的一些相关配置；
• config 文件夹：项目开发环境和生产环境的一些相关配置；
• node_modules 文件夹 ：这里存放的是安装包，比如webpack、第三方插件库、项目的依赖文件；
• src 文件夹：我们将要写的代码放在这里面，打包上线时会进行编译、压缩等操作。
• static 文件夹：这里存放的是一些静态文件比如图片、css文件、不需要进行压缩的js文件，打包时这个文件夹将原封不动的放到dist（打包时自动生产的文件夹）文件夹下面。
• .babelrc 文件：ES6语法编译配置，主要是将ES 转成ES 需要适配那些浏览器
• .editorconfig 文件：定义代码格式，对代码的风格进行一个统一。
• .gitignore 文件：git上传需要忽略的文件格式
• .postcssrc.js 文件：postcss配置文件
• index.html 文件：要进行访问的首页面
• package-lock.json 文件：锁定依赖模块和子模块的版本号
• package.json 文件：项目基本信息,包依赖信息等
• README.md 文件：项目说明文件

项目兼容浏览器版本

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        targets: {
          browsers: ['ie >= 7', 'safari >= 7']
        },
        useBuiltIns: 'entry',
        // 三种兼容方法一种是入口声明entry 一种是 useBuiltIns: 'usage' 会自动 获取入口entry webpack 配置 其他都需要安装babel
        // babel新版本废弃 @babel/polyfill
        // import "core-js";
        // import "regenerator-runtime/runtime";
        polyfills: ['es6.promise', 'es6.symbol']
      }
    ],
    '@vue/babel-preset-jsx'
  ],
  plugins: ['@babel/plugin-syntax-jsx']
};

项目打包

npm run build
会在项目根目录下生成dist文件夹，包含static目录和index.html文件，可以直接将这两个文件扔到服务端，或者将dist文件扔到服务端

打包之后的问题

1、出现空白页问题

主要原因是路径问题：
更改config下的index.js中build模块导出的路径。因为index.html与static在同一级目录下面，所以改为 "./ "
另外还需要注意，src里面router/index.js路由设置里面默认值是hash，如果改成history的话也会是一片空白。所以改为hash或者直接把模式配置删除，如果非要用history的话，需要在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html，这个页面就是app依赖页面。

2、出现资源引用路径问题

情况一.如果是将static与index.html直接放在服务器根目录,也就是说，当前的应用访问的网址如:http://www.xxx.com
解决办法：
配置输出的publiPath:“/“或者”./”
情况二.直接将打包后的dist文件放在了服务器的根目录，也就是如果需要访问当前的应用，访问的网址如:http://www.xxx.com/dist
解决办法：

  首先需要在创建路由实例中增加：
    const router = new VueRouter({
        mode: 'history',
        base: '/mobile/',
        scorllBehavior: () => ({

        y: 0

        }),
        routes
    });
        然后再打包发布目录:
        publiPath:"/dist/"或者"http://www.xxx.com/dist/"

3、背景图片加载不出来

（1）打开webpack.prod.conf.js，在output中添加 publicPath: ‘./’，如下图所示：（2）修改打包后背景图片的引用路径
资源内的图片是通过css加载的，CSS代码如：background：url（…/ assets / img-bg / buttonbg.png）no-repeat;

但是打包过后的CSS变成了背景：url（…/…/ static / img / buttonbg.68979b3.png）no-repeat;我们需要修改配置文件，是的CSS代码打包后，资源引用路径还是相对路径;

解决办法：

1.打开build文件夹下的utils.js ;

2.在下图位置添加 publicPath: '…/…/ '

4、 打包后再次打包后修改的样式无效，在浏览器中找不到该css属性。

解决办法：
首先注释掉webpack.prod.config.js中，下面的代码

这个插件的作用是为了消除来自不同组件之间可能重复的css的。
然后再utils.js中添加，minimize: true

5、路由跳转错误监听 main.js

/* 路由异常错误处理，尝试解析一个异步组件时发生错误，重新渲染目标页面 */
router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  const targetPath = router.history.pending.fullPath;
  console.log(targetPath, 'targetPath----')
  if (isChunkLoadFailed) {
    // router.replace({path: targetPath});
    // window.location.reload();
  }
});

优化包的大小

1、按需加载路由
router/index.js

2、config/index.js中取消生成map文件

项目分析工具

可以通过官方提供的 stat.json 文件帮助我们分析打包结果，stat.json 文件可以通过下面语句快速生成：

webpack --profile --json > stats.json

接着我们通过官网提供的 stats.json 分析工具 进行分析，上传 stats.json 文件之后，就可以得到如下图所示分析结果：

安装依赖方式说明

npm install moduleName

1. 安装模块到项目node_modules目录下。
2. 不会将模块依赖写入 package.json 中 devDependencies 或 dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。

npm install -g moduleName

1. 安装模块到全局，不会在项目node_modules目录中保存模块包。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。
   -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置，具体查看方法是在终端输入npm config edit，在弹出的文档中找到; prefix=C:\node，就是了。

npm install --save moduleName （用得较多）

1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入package文件的 dependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。

npm install --save-dev moduleName

1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入package文件的 devDependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。

PS：
dependencies：在生产环境中需要的依赖
devDependencies：在开发环境中、测试环境中需要的依赖

常用包

1、axios：npm install axios
2、qs：npm install qs
PS: qs.parse()将URL解析成对象的形式

const Qs = require('qs');
let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';
Qs.parse(url);

{'method':'query_sql_dataset_data','projectId':'85','appToken':'7d22e38e-5717-11e7-907b-a6006ad3dba0',}

qs.stringify()将对象 序列化成URL的形式，以&进行拼接

const Qs = require('qs');
let obj= {
     method: "query_sql_dataset_data",
     projectId: "85",
     appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",
     datasetId: " 12564701"
   };

Qs.stringify(obj);

'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0'