当前位置:   article > 正文

vuecli3.9.1架构---部署打包配置区分三种环境,同时支持cdn打包,保证JS最小化的一条龙服务与请求封装案例_vue项目打包指定服务器架构

vue项目打包指定服务器架构

首先我的版本如下:

vue3.0文件构造简单,仅仅需要自定义vue.config.js即可

  1. const path = require('path')
  2. function resolve(dir) {
  3. return path.join(__dirname, dir)
  4. }
  5. module.exports = {
  6. // 基本路径
  7. publicPath: './',
  8. // 输出文件目录 不写则默认根目录
  9. outputDir: 'dist',
  10. assetsDir: 'static', // 静态资源目录 (js, css, img, fonts)
  11. // eslint-loader 是否在保存的时候检查
  12. // lintOnSave: 'error',
  13. devServer: {
  14. overlay: {
  15. warnings: true,
  16. errors: true
  17. }
  18. },
  19. // use the full build with in-browser compiler?
  20. // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  21. // compiler: false,
  22. // webpack配置
  23. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md webpack链接API,用于生成和修改webapck配置
  24. //部署打包html带引号
  25. chainWebpack: config => {
  26. config.resolve.alias
  27. .set('@', resolve('src'))
  28. config.plugin("html").tap(args => {
  29. args[0].minify = false;
  30. return args;
  31. });
  32. },
  33. //压缩打包文件大小
  34. configureWebpack: config => {
  35. // if (isProduction) {
  36. // config.plugins.push(new CompressionWebpackPlugin({
  37. // algorithm: 'gzip',
  38. // test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
  39. // threshold: 10240,
  40. // minRatio: 0.8
  41. // }))
  42. config.externals = {
  43. 'vue': 'Vue',
  44. 'vuex': 'Vuex',
  45. 'vue-router': 'VueRouter',
  46. 'element-ui': 'ELEMENT',
  47. 'Axios': 'axios',
  48. 'jquery': '$',
  49. 'moment': 'moment',
  50. 'js-cookie': 'Cookies',
  51. 'echarts': 'echarts',
  52. 'tinymce/tinymce': 'tinymce'
  53. }
  54. // }
  55. },
  56. // configureWebpack: (config) => {// webpack配置,值位对象时会合并配置,为方法时会改写配置
  57. // if (debug) { // 开发环境配置
  58. // config.devtool = 'cheap-module-eval-source-map'
  59. // } else { // 生产环境配置
  60. // }
  61. // Object.assign(config, { // 开发生产共同配置
  62. // resolve: {
  63. // alias: {
  64. // '@': path.resolve(__dirname, './src')//设置路径别名
  65. // //...
  66. // }
  67. // }
  68. // })
  69. // },
  70. // vue-loader 配置项
  71. // https://vue-loader.vuejs.org/en/options.html
  72. // vueLoader: {},
  73. // 生产环境是否生成 sourceMap 文件
  74. productionSourceMap: false,
  75. // css相关配置 配置高于chainWebpack中关于css loader的配置
  76. // css: {
  77. // // 是否使用css分离插件 ExtractTextPlugin
  78. // extract: true,
  79. // // 开启 CSS source maps?是否在构建样式地图,false将提高构建速度
  80. // sourceMap: false,
  81. // // css预设器配置项
  82. // loaderOptions: {},
  83. // // 启用 CSS modules for all css / pre-processor files.
  84. // modules: false
  85. // },
  86. // use thread-loader for babel & TS in production build
  87. // enabled by default if the machine has more than 1 cores 构建时开启多进程处理babel编译
  88. //parallel: require('os').cpus().length > 1,
  89. // 是否启用dll
  90. // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  91. // dll: false,
  92. // PWA 插件相关配置
  93. // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  94. //pwa: {},
  95. // webpack-dev-server 相关配置
  96. devServer: {
  97. open: process.platform === 'darwin',
  98. host: '0.0.0.0',
  99. port: 8080,
  100. https: false,
  101. hotOnly: false,
  102. proxy: null, // 设置代理
  103. before: app => { }
  104. },
  105. // 第三方插件配置
  106. pluginOptions: {
  107. // ...
  108. }
  109. }

 

其次需要根目录下需要以下几个文件

.editorconfig

  1. [*.{js,jsx,ts,tsx,vue}]
  2. indent_style = space
  3. indent_size = 2
  4. trim_trailing_whitespace = true
  5. insert_final_newline = true

.env.development---这个对应本地地址打包环境

  1. # just a flag
  2. NODE_ENV = 'development'
  3. # base api
  4. VUE_APP_APIUrl = 'http://192.168.2.215:8002/v1'
  5. # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
  6. # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
  7. # It only does one thing by converting all import() to require().
  8. # This configuration can significantly increase the speed of hot updates,
  9. # when you have a large number of pages.
  10. # Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
  11. VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production------这个对应正式环境

  1. # just a flag
  2. NODE_ENV = 'production'
  3. # base api
  4. VUE_APP_APIUrl = 'http://dsoaapi.dszj.com/v1'
  5. #VUE_APP_APIUrl = 'http://testdsoaapi.dszj.com/v1'

.env.test-----这个对应正式环境与本地打包环境中间的测试服务器上线环境

  1. # just a flag
  2. NODE_ENV = 'test'
  3. # base api
  4. VUE_APP_APIUrl = 'http://testdsoaapi.dszj.com/v1'
  5. # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
  6. # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
  7. # It only does one thing by converting all import() to require().
  8. # This configuration can significantly increase the speed of hot updates,
  9. # when you have a large number of pages.
  10. # Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
  11. VUE_CLI_BABEL_TRANSPILE_MODULES = true

最后一步,修改package.json,主要修改为build:test与build:dev

  1. {
  2. "name": "newsone",
  3. "version": "0.1.0",
  4. "private": true,
  5. "scripts": {
  6. "serve": "vue-cli-service serve",
  7. "build": "vue-cli-service build",
  8. "lint": "vue-cli-service lint",
  9. "build:test": "vue-cli-service build --mode test",
  10. "build:dev": "vue-cli-service build --mode development"
  11. },
  12. "dependencies": {
  13. "axios": "^0.19.0",
  14. "core-js": "^2.6.5",
  15. "element-ui": "2.7.2",
  16. "js-cookie": "^2.2.0",
  17. "jsonp": "^0.2.1",
  18. "vue": "^2.6.10",
  19. "vue-router": "^3.0.7",
  20. "vuex": "^3.1.1"
  21. },
  22. "devDependencies": {
  23. "@babel/plugin-syntax-dynamic-import": "^7.2.0",
  24. "@vue/cli-plugin-babel": "^3.9.0",
  25. "@vue/cli-plugin-eslint": "^3.9.0",
  26. "@vue/cli-service": "^3.9.0",
  27. "@vue/eslint-config-standard": "^4.0.0",
  28. "babel-eslint": "^10.0.1",
  29. "compression-webpack-plugin": "^3.0.0",
  30. "eslint": "^5.16.0",
  31. "eslint-plugin-vue": "^5.0.0",
  32. "vue-template-compiler": "^2.6.10"
  33. },
  34. "browserslist": [
  35. "> 1%",
  36. "last 2 versions"
  37. ]
  38. }

这样我们就彻底完工了,那么只剩下一个小问题,很多人发现我的vue.config.js下有config.externals,这是因为我的public下的index.html需要cnd引入

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8. <title>newsone</title>
  9. <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.7.2/theme-chalk/index.css">
  10. </head>
  11. <body>
  12. <noscript>
  13. <strong>对不起,您的浏览器不支持!</strong>
  14. </noscript>
  15. <div id="app"></div>
  16. <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  17. <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  18. <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
  19. <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
  20. <script src="https://cdn.bootcss.com/element-ui/2.7.2/index.js"></script>
  21. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  22. <script src="https://cdn.bootcss.com/js-cookie/2.2.0/js.cookie.js"></script>
  23. <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
  24. <script src="js/tinymce.min.js"></script>
  25. <script src="js/web.js"></script>
  26. <!-- built files will be auto injected -->
  27. </body>
  28. </html>

各位道友,强烈建议大家在修改cdn地址的时候能够选择自己的版本号,我这个是我现在项目所需,具体项目的版本如果一成不变造成的后续问题我一概不保证哟

百度网盘源码地址:

链接:https://pan.baidu.com/s/102nc9oDKntPuj7U_NJSJIw 
提取码:x1e9 

 

github地址:

https://github.com/war3121w/vue3.9.1-.git

 

个人网址:http://www.pjjgrweb.com/

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/165396
推荐阅读
相关标签
  

闽ICP备14008679号