赞
踩
首先我的版本如下:
vue3.0文件构造简单,仅仅需要自定义vue.config.js即可
- const path = require('path')
-
- function resolve(dir) {
- return path.join(__dirname, dir)
- }
-
- module.exports = {
- // 基本路径
- publicPath: './',
- // 输出文件目录 不写则默认根目录
- outputDir: 'dist',
- assetsDir: 'static', // 静态资源目录 (js, css, img, fonts)
- // eslint-loader 是否在保存的时候检查
- // lintOnSave: 'error',
- devServer: {
- overlay: {
- warnings: true,
- errors: true
- }
- },
- // use the full build with in-browser compiler?
- // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
- // compiler: false,
-
- // webpack配置
- // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md webpack链接API,用于生成和修改webapck配置
- //部署打包html带引号
- chainWebpack: config => {
- config.resolve.alias
- .set('@', resolve('src'))
- config.plugin("html").tap(args => {
- args[0].minify = false;
- return args;
- });
- },
- //压缩打包文件大小
- configureWebpack: config => {
- // if (isProduction) {
- // config.plugins.push(new CompressionWebpackPlugin({
- // algorithm: 'gzip',
- // test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
- // threshold: 10240,
- // minRatio: 0.8
- // }))
- config.externals = {
- 'vue': 'Vue',
- 'vuex': 'Vuex',
- 'vue-router': 'VueRouter',
- 'element-ui': 'ELEMENT',
- 'Axios': 'axios',
- 'jquery': '$',
- 'moment': 'moment',
- 'js-cookie': 'Cookies',
- 'echarts': 'echarts',
- 'tinymce/tinymce': 'tinymce'
- }
- // }
- },
- // configureWebpack: (config) => {// webpack配置,值位对象时会合并配置,为方法时会改写配置
- // if (debug) { // 开发环境配置
- // config.devtool = 'cheap-module-eval-source-map'
- // } else { // 生产环境配置
-
- // }
- // Object.assign(config, { // 开发生产共同配置
- // resolve: {
- // alias: {
- // '@': path.resolve(__dirname, './src')//设置路径别名
- // //...
- // }
- // }
- // })
- // },
- // vue-loader 配置项
- // https://vue-loader.vuejs.org/en/options.html
- // vueLoader: {},
-
- // 生产环境是否生成 sourceMap 文件
- productionSourceMap: false,
- // css相关配置 配置高于chainWebpack中关于css loader的配置
- // css: {
- // // 是否使用css分离插件 ExtractTextPlugin
- // extract: true,
- // // 开启 CSS source maps?是否在构建样式地图,false将提高构建速度
- // sourceMap: false,
- // // css预设器配置项
- // loaderOptions: {},
- // // 启用 CSS modules for all css / pre-processor files.
- // modules: false
- // },
- // use thread-loader for babel & TS in production build
- // enabled by default if the machine has more than 1 cores 构建时开启多进程处理babel编译
- //parallel: require('os').cpus().length > 1,
- // 是否启用dll
- // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
- // dll: false,
-
- // PWA 插件相关配置
- // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
- //pwa: {},
- // webpack-dev-server 相关配置
- devServer: {
- open: process.platform === 'darwin',
- host: '0.0.0.0',
- port: 8080,
- https: false,
- hotOnly: false,
- proxy: null, // 设置代理
- before: app => { }
- },
- // 第三方插件配置
- pluginOptions: {
- // ...
- }
- }
其次需要根目录下需要以下几个文件
.editorconfig
- [*.{js,jsx,ts,tsx,vue}]
- indent_style = space
- indent_size = 2
- trim_trailing_whitespace = true
- insert_final_newline = true
.env.development---这个对应本地地址打包环境
- # just a flag
- NODE_ENV = 'development'
-
- # base api
-
- VUE_APP_APIUrl = 'http://192.168.2.215:8002/v1'
-
-
- # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
- # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
- # It only does one thing by converting all import() to require().
- # This configuration can significantly increase the speed of hot updates,
- # when you have a large number of pages.
- # Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
-
- VUE_CLI_BABEL_TRANSPILE_MODULES = true
.env.production------这个对应正式环境
- # just a flag
- NODE_ENV = 'production'
-
- # base api
-
- VUE_APP_APIUrl = 'http://dsoaapi.dszj.com/v1'
-
- #VUE_APP_APIUrl = 'http://testdsoaapi.dszj.com/v1'
-
.env.test-----这个对应正式环境与本地打包环境中间的测试服务器上线环境
- # just a flag
- NODE_ENV = 'test'
-
- # base api
-
- VUE_APP_APIUrl = 'http://testdsoaapi.dszj.com/v1'
-
-
- # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
- # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
- # It only does one thing by converting all import() to require().
- # This configuration can significantly increase the speed of hot updates,
- # when you have a large number of pages.
- # Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
-
- VUE_CLI_BABEL_TRANSPILE_MODULES = true
最后一步,修改package.json,主要修改为build:test与build:dev
- {
- "name": "newsone",
- "version": "0.1.0",
- "private": true,
- "scripts": {
- "serve": "vue-cli-service serve",
- "build": "vue-cli-service build",
- "lint": "vue-cli-service lint",
- "build:test": "vue-cli-service build --mode test",
- "build:dev": "vue-cli-service build --mode development"
- },
- "dependencies": {
- "axios": "^0.19.0",
- "core-js": "^2.6.5",
- "element-ui": "2.7.2",
- "js-cookie": "^2.2.0",
- "jsonp": "^0.2.1",
- "vue": "^2.6.10",
- "vue-router": "^3.0.7",
- "vuex": "^3.1.1"
- },
- "devDependencies": {
- "@babel/plugin-syntax-dynamic-import": "^7.2.0",
- "@vue/cli-plugin-babel": "^3.9.0",
- "@vue/cli-plugin-eslint": "^3.9.0",
- "@vue/cli-service": "^3.9.0",
- "@vue/eslint-config-standard": "^4.0.0",
- "babel-eslint": "^10.0.1",
- "compression-webpack-plugin": "^3.0.0",
- "eslint": "^5.16.0",
- "eslint-plugin-vue": "^5.0.0",
- "vue-template-compiler": "^2.6.10"
- },
- "browserslist": [
- "> 1%",
- "last 2 versions"
- ]
- }
这样我们就彻底完工了,那么只剩下一个小问题,很多人发现我的vue.config.js下有config.externals,这是因为我的public下的index.html需要cnd引入
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <title>newsone</title>
- <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.7.2/theme-chalk/index.css">
-
- </head>
-
- <body>
- <noscript>
- <strong>对不起,您的浏览器不支持!</strong>
- </noscript>
- <div id="app"></div>
- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
- <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
- <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
- <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
- <script src="https://cdn.bootcss.com/element-ui/2.7.2/index.js"></script>
- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
- <script src="https://cdn.bootcss.com/js-cookie/2.2.0/js.cookie.js"></script>
- <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
- <script src="js/tinymce.min.js"></script>
- <script src="js/web.js"></script>
- <!-- built files will be auto injected -->
- </body>
-
- </html>
各位道友,强烈建议大家在修改cdn地址的时候能够选择自己的版本号,我这个是我现在项目所需,具体项目的版本如果一成不变造成的后续问题我一概不保证哟
百度网盘源码地址:
链接:https://pan.baidu.com/s/102nc9oDKntPuj7U_NJSJIw
提取码:x1e9
github地址:
https://github.com/war3121w/vue3.9.1-.git
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。