vuecli3 项目打包优化及部署

1.把vue,axios,vue-router,vant, iconfont等长期不需要更新的包整理到/public/cdn目录下
vuecli3 项目打包优化及部署_第1张图片

2.安装js语法优化插件(babel-polyfill, classlist-polyfill

yarn add babel-polyfill classlist-polyfill

安装babel-polyfillclasslist-polyfill。Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而可以在现有环境执行,所以我们可以用ES6编写,而不用考虑环境支持的问题;classList.js是完全实现的跨浏览器JavaScript填充程序element.classList,解决不同浏览器的兼容性问题

3.配置vue.config.js文件
chainWebpack中放入整理出来的包,key为包名,value为在浏览器中的抛出的全局变量名称。

module.exports = {
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: config => {
    config.externals({
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'vant': 'vant',
      'element-ui': 'ELEMENT',
      'jquery': '$'
    })
    const entry = config.entry('app')
    entry
      .add('babel-polyfill')
      .end()
    entry
      .add('classlist-polyfill')
      .end()
  }
}

4.在项目index.html加入整理出来的文件
public/index.html中引入整理出来的js和css文件。


<html lang="en">
  <head>
    <link rel="stylesheet" href="<%= BASE_URL %>cdn/vant/index.css">
    <link rel="stylesheet" href="<%= BASE_URL %>cdn/element-ui/index.css">
    <link rel="stylesheet" href="<%= BASE_URL %>iconfont/iconfont.css">
  head>
  <body>
    <div id="app">div>
    
    <script src="<%= BASE_URL %>cdn/vue/index.js">script>
    <script src="<%= BASE_URL %>cdn/vuex/index.js">script>
    <script src="<%= BASE_URL %>cdn/vue-router/index.js">script>
    <script src="<%= BASE_URL %>cdn/axios/index.js">script>
    <script src="<%= BASE_URL %>cdn/vant/index.js">script>
    <script src="<%= BASE_URL %>cdn/element-ui/index.js">script>
  body>
html>

5.开发和生产环境的测试
yarn serve // 开发环境运行项目 检查项目是否存在白屏/报错等情况。
确认开发环境没有问题后
yarn build // 打包项目,生产环境测试,检查各浏览器兼容性等。

6.本地部署

  • 安装nginx 4 windows,解压到需要安装nginx的目录。
  • 将打包出来的文件(默认dist/),放到nginx/html目录下。
  • 配置conf/nginx.conf文件
server {
    listen       80; 端口
    server_name  localhost; 域名

    # 配置首页相关内容
    location / {
        try_files $uri $uri/ @router;
        index index.html index.htm;
    }

    # vue history路由模式配置(hash可不用)
    location @router {
        rewrite ^.*$ /index.html last;
    }

    # 代理配置 同vue.config.js => devServer
    location ^~/api/ {
        proxy_pass http://127.0.0.1:3000/;
    }
}
  • 运行nginx.exe,在浏览器中查看实际运行效果(localhost)

  • 7.注意

  • mode使用history时,需要配置服务器域名后全部url路径

    mode使用hash时,不需要进行配置。

你可能感兴趣的:(vue易错,webpack)