默认提交
Showing
5 changed files
with
102 additions
and
102 deletions
.env.fev
deleted
100644 → 0
... | @@ -6,7 +6,7 @@ | ... | @@ -6,7 +6,7 @@ |
6 | "serve": "vue-cli-service serve", | 6 | "serve": "vue-cli-service serve", |
7 | "dev": "vue-cli-service serve", | 7 | "dev": "vue-cli-service serve", |
8 | "build": "vue-cli-service build --no clean", | 8 | "build": "vue-cli-service build --no clean", |
9 | "fev": "vue-cli-service build --mode fev", | 9 | "sandbox": "vue-cli-service build --mode sandbox", |
10 | "lint": "vue-cli-service lint", | 10 | "lint": "vue-cli-service lint", |
11 | "oss": "node build/oss-released.js" | 11 | "oss": "node build/oss-released.js" |
12 | }, | 12 | }, | ... | ... |
1 | const Timestamp = new Date().getTime(); | 1 | const Timestamp = new Date().getTime(); |
2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | 2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
3 | // 打包目录 | 3 | // 打包目录 |
4 | let webpack_public_path = 'dist' | 4 | let webpack_public_path = 'dist' |
5 | var path = require('path') | 5 | var path = require('path') |
6 | const PrerenderSPAPlugin = require('prerender-spa-plugin') | 6 | const PrerenderSPAPlugin = require('prerender-spa-plugin') |
7 | const Renderer = PrerenderSPAPlugin.PuppeteerRenderer | 7 | const Renderer = PrerenderSPAPlugin.PuppeteerRenderer |
8 | 8 | ||
9 | let plugins = [ | 9 | let plugins = [ |
10 | new MiniCssExtractPlugin({ | 10 | new MiniCssExtractPlugin({ |
11 | filename: `static/css/[name].${Timestamp}.css`, | 11 | filename: `static/css/[name].${Timestamp}.css`, |
12 | chunkFilename: `static/css/[name].${Timestamp}.css` | 12 | chunkFilename: `static/css/[name].${Timestamp}.css` |
13 | }) | 13 | }) |
14 | ]; | 14 | ]; |
15 | 15 | ||
16 | if (process.env.NODE_ENV === 'production') { | 16 | if (process.env.NODE_ENV === 'production') { |
17 | // 生产环境 | 17 | // 生产环境 |
18 | webpack_public_path = process.env.VUE_APP_TITLE | 18 | webpack_public_path = process.env.VUE_APP_TITLE; |
19 | plugins.push( | 19 | |
20 | new PrerenderSPAPlugin({ | 20 | plugins.push( |
21 | staticDir: path.join(__dirname, 'dist'), | 21 | new PrerenderSPAPlugin({ |
22 | routes: ['/', '/demo', '/about'], | 22 | staticDir: path.join(__dirname, webpack_public_path || 'dist'), // 如果没配置环境目录(生产),则写到目录dist |
23 | renderer: new Renderer({ | 23 | routes: ['/', '/demo', '/about'], |
24 | inject: { | 24 | renderer: new Renderer({ |
25 | foo: 'bar' | 25 | inject: { |
26 | }, | 26 | foo: 'bar' |
27 | headless: false, | 27 | }, |
28 | renderAfterDocumentEvent: 'render-event', | 28 | headless: false, |
29 | //renderAfterTime: 5000, | 29 | renderAfterDocumentEvent: 'render-event', |
30 | //renderAfterElementExists: 'my-app-element' | 30 | //renderAfterTime: 5000, |
31 | }) | 31 | //renderAfterElementExists: 'my-app-element' |
32 | }) | 32 | }) |
33 | ) | 33 | }) |
34 | ) | ||
34 | } else { | 35 | } else { |
35 | // 开发环境 | 36 | // 开发环境 |
36 | } | 37 | } |
37 | 38 | ||
38 | function resolve(dir) { | 39 | function resolve(dir) { |
39 | return path.join(__dirname, dir); | 40 | return path.join(__dirname, dir); |
40 | } | 41 | } |
41 | 42 | ||
42 | module.exports = { | 43 | module.exports = { |
43 | lintOnSave: true, | 44 | lintOnSave: true, |
44 | chainWebpack: (config) => { | 45 | chainWebpack: (config) => { |
45 | config.resolve.alias | 46 | config.resolve.alias |
46 | .set('@', resolve('src')) | 47 | .set('@', resolve('src')) |
47 | .set('@assets', resolve('src/assets')) | 48 | .set('@assets', resolve('src/assets')) |
48 | .set('@components', resolve('src/components')) | 49 | .set('@components', resolve('src/components')) |
49 | .set('@pages', resolve('src/pages')) | 50 | .set('@pages', resolve('src/pages')) |
50 | .set('@api', resolve('src/api')) | 51 | .set('@api', resolve('src/api')) |
51 | .set('@styles', resolve('src/styles')) | 52 | .set('@styles', resolve('src/styles')) |
52 | .set('@store', resolve('src/store')) | 53 | .set('@store', resolve('src/store')) |
53 | .set('@utils', resolve('src/utils')) | 54 | .set('@utils', resolve('src/utils')) |
54 | }, | 55 | }, |
55 | configureWebpack: { // webpack 配置 | 56 | configureWebpack: { // webpack 配置 |
56 | // 修改打包后js文件名 | 57 | // 修改打包后js文件名 |
57 | output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 | 58 | output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 |
58 | filename: `static/js/[name].${Timestamp}.js`, | 59 | filename: `static/js/[name].${Timestamp}.js`, |
59 | chunkFilename: `static/js/[name].${Timestamp}.js` | 60 | chunkFilename: `static/js/[name].${Timestamp}.js` |
60 | }, | 61 | }, |
61 | // 修改打包后css文件名 | 62 | // 修改打包后css文件名 |
62 | plugins: plugins | 63 | plugins: plugins |
63 | }, | 64 | }, |
64 | // 修改打包后img文件名 | 65 | // 修改打包后img文件名 |
65 | // chainWebpack: config => { | 66 | // chainWebpack: config => { |
66 | // config.module | 67 | // config.module |
67 | // .rule('images') | 68 | // .rule('images') |
68 | // .use('url-loader') | 69 | // .use('url-loader') |
69 | // .tap(options => { | 70 | // .tap(options => { |
70 | // return { | 71 | // return { |
71 | // limit: 4096, | 72 | // limit: 4096, |
72 | // fallback: { | 73 | // fallback: { |
73 | // loader: 'file-loader', | 74 | // loader: 'file-loader', |
74 | // options: { | 75 | // options: { |
75 | // name: `img/[name].${Timestamp}.[ext]` | 76 | // name: `img/[name].${Timestamp}.[ext]` |
76 | // } | 77 | // } |
77 | // } | 78 | // } |
78 | // }; | 79 | // }; |
79 | // }) | 80 | // }) |
80 | // }, | 81 | // }, |
81 | // 部署生产环境和开发环境下的URL。 | 82 | // 部署生产环境和开发环境下的URL。 |
82 | // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上 | 83 | // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上 |
83 | //例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。 | 84 | //例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。 |
84 | //baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath | 85 | //baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath |
85 | //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/", | 86 | //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/", |
86 | publicPath: process.env.NODE_ENV === "dev" ? "/" : "./", | 87 | publicPath: process.env.NODE_ENV === "dev" ? "/" : "./", |
87 | 88 | ||
88 | // outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致) | 89 | // outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致) |
89 | outputDir: webpack_public_path, | 90 | outputDir: webpack_public_path, |
90 | //用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下) | 91 | //用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下) |
91 | assetsDir: "assets", | 92 | assetsDir: "assets", |
92 | //指定生成的 index.html 的输出路径 (打包之后,改变系统默认的index.html的文件名) | 93 | //指定生成的 index.html 的输出路径 (打包之后,改变系统默认的index.html的文件名) |
93 | // indexPath: "myIndex.html", | 94 | // indexPath: "myIndex.html", |
94 | //默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) | 95 | //默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) |
95 | filenameHashing: false, | 96 | filenameHashing: false, |
96 | 97 | ||
97 | // lintOnSave:{ type:Boolean default:true } 问你是否使用eslint | 98 | // lintOnSave:{ type:Boolean default:true } 问你是否使用eslint |
98 | lintOnSave: true, | 99 | lintOnSave: true, |
99 | //如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置 | 100 | //如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置 |
100 | // lintOnSave: process.env.NODE_ENV !== 'production', | 101 | // lintOnSave: process.env.NODE_ENV !== 'production', |
101 | 102 | ||
102 | //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false) | 103 | //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false) |
103 | // runtimeCompiler: false, | 104 | // runtimeCompiler: false, |
104 | 105 | ||
105 | /** | 106 | /** |
106 | * 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 | 107 | * 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 |
107 | * 打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件 | 108 | * 打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件 |
108 | * map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 | 109 | * map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 |
109 | * 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。 | 110 | * 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。 |
110 | * */ | 111 | * */ |
111 | productionSourceMap: false, | 112 | productionSourceMap: false, |
112 | 113 | ||
113 | // 它支持webPack-dev-server的所有选项 | ||
114 | // devServer: { | ||
115 | // host: "localhost", | ||
116 | // port: 9001, // 端口号 | ||
117 | // https: false, // https:{type:Boolean} | ||
118 | // open: true, //配置自动启动浏览器 | ||
119 | // // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 | ||
120 | // } | ||
121 | }; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
114 | // 它支持webPack-dev-server的所有选项 | ||
115 | // devServer: { | ||
116 | // host: "localhost", | ||
117 | // port: 9001, // 端口号 | ||
118 | // https: false, // https:{type:Boolean} | ||
119 | // open: true, //配置自动启动浏览器 | ||
120 | // // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 | ||
121 | // } | ||
122 | }; | ... | ... |
-
Please register or sign in to post a comment