vue |
您所在的位置：网站首页 › vuecli配置代理 › vue |
vue
1.先全局安装vue-cli3.0 检测安装：vue -V 创立 这里假如你是第一次用3.0版本的话，是没有前两个的，而只有最后两个，这里是让你选的，第一个是默认配置，一般选第二个，自己配置，这里选择最后一个  当你选择后会出现上面图上的东西，这里你可以自由选择用哪些配置，按上下键选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步，这里演示，我随意选了几个  下一步之后问讯问你安装哪一种 CSS 预解决语言，你随便选择，我是一直用的less  上面这个是问你选择哪个自动化代码格式化检测，配合vscode编辑器的Prettier - Code formatter插件，我选的随后一个  这里第一个选项是问你能否保存刚才的配置，选择确定后你下次再创立新项目就有你以前选择的配置了，不用重新再配置一遍了  上边这俩意思问你像，babel,postcss,eslint这些配置文件放哪？第一个是：放独立文件放置第二个是：放package.json里这里推荐放单独配置文件，选第一个 上边倒数第二行问你能否将以上这些将此保存为未来项目的预配置吗？最后一个是形容项目，你随便选择，点击确定就开始下载模板了  上边是2.0的目录结构 这里发现少了vue.config.js文件，那以前的配置怎样搞？下边你要做的就是在根目录下新建一个vue.config.js文件，进行你的配置，具体配置看文档，我在最下边简单罗列了几个 package.json配置"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "release": "vue-cli-service build --mode release", "lint": "vue-cli-service lint" }4.打包命令 打包测试版本：npm run build打包正式版本：npm run release打包好的文件分别放在dist/release中打包文件优化1.安装插件 uglifyjs-webpack-plugin //去除consolecompression-webpack-plugin //gzip压缩npm install --save -dev uglifyjs-webpack-plugin compression-webpack-pluginvue.config.js配置//去console插件const UglifyJsPlugin = require('uglifyjs-webpack-plugin')//gzip压缩插件const CompressionWebpackPlugin = require('compression-webpack-plugin')module.exports={ // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // 用于嵌套生成的静态资产（js，css，img，fonts）的目录。 assetsDir: '', // 以多页模式构建应用程序。 pages: undefined, // eslint-loader 能否在保存的时候检查 lintOnSave: true, // 能否使用包含运行时编译器的Vue核心的构建。 runtimeCompiler: false, // 默认情况下babel-loader忽略其中的所有文件node_modules。 transpileDependencies: [], // 生产环境sourceMap productionSourceMap: true, // webpack配置 configureWebpack: () => {}, chainWebpack: () => {}, // css相关配置 css: { // 启用 CSS modules modules: false, // 能否使用css分离插件 extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: {}, } // webpack-dev-server 相关配置 devServer: { host: '0.0.0.0', port: 8080, https: false, hotOnly: false, proxy: null, // 设置代理商 before: app => {} }, parallel: require('os').cpus().length > 1, // PWA 插件相关配置 pwa: {}, // 第三方插件配置 pluginOptions: { // ... }} |
【本文地址】